物化css单选按钮不可见

Question

物化css单选按钮不可见

我正在尝试将实体化单选按钮添加到我的页面上，但由于某种原因，实际的单选按钮没有显示出来，这是一个共享点站点，我正在链接到实体化 js 和 css 文件，其他文本输入字段正在工作，我只是复制并粘贴了 materialize 文档中的示例。在寻找问题的答案时，我注意到在 google 的其中一个文档页面上发生了同样的问题。我附上了一张截图，可以在这里找到。知道如何让这些无线电图标显示出来吗？

http://materializecss.com/forms.html

编辑：这是我的示例代码

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    </head>
    <body>
      <form action="#">
        <p>
          <label>
            <input name="group1" type="radio" checked />
            <span>Red</span>
          </label>
        </p>
        <p>
          <label>
            <input name="group1" type="radio" />
            <span>Yellow</span>
          </label>
        </p>
        <p>
          <label>
            <input class="with-gap" name="group1" type="radio"  />
            <span>Green</span>
          </label>
        </p>
        <p>
          <label>
            <input name="group1" type="radio" disabled="disabled" />
            <span>Brown</span>
          </label>
        </p>
      </form>
    </body>
    </html>

Run Code Online (Sandbox Code Playgroud)

我希望它像这里一样出现

http://materializecss.com/radio-buttons.html

Answer 1

小智 7

我在 chrome 中检查了谷歌开发人员的工具（F12）。

[type="radio"]:not(:checked), [type="radio"]:checked {
    position: absolute;
    opacity: 0; 
    pointer-events: none;
}

Run Code Online (Sandbox Code Playgroud)

因为“不透明度”属性值为零

Materialise 展示了标准代码示例：

  <label>
    <input name="group1" type="radio" checked />
    <span>Red</span>
  </label>

Run Code Online (Sandbox Code Playgroud)

但是你的代码：

  <input name="group1" type="radio" id="test1" />
  <label for="test1">Red</label>

Run Code Online (Sandbox Code Playgroud)

制作 `opacity: 1;` 只会带回标准复选框而不是实体化复选框。 (3认同)

归档时间：	8 年，2 月前
查看次数：	9817 次
最近记录：	5 年，5 月前