Question

我正在尝试将物化单选按钮添加到我的页面上但由于某种原因实际的单选按钮没有显示，它是一个sharepoint站点，我链接到materialise js和css文件，其他文本输入字段正在工作，我只是复制并粘贴了实体化文档中的示例。在寻找问题的答案时，我注意到在谷歌的一个文档页面上发生了同样的问题。我已附上此截图，可在此处找到。知道我怎么能让这些收音机图标显示出来吗？

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>

我想让它像这里一样出现

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

Answer 1

我通过Chrome浏览器检查了谷歌开发人员的工具（F12）。

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

因为＆＃34;不透明度＆＃34;属性值为零

Materialise显示标准代码示例：

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

但你的代码：

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

Answer 2

我遇到了同样的错误，并且 B00AJ 将不透明度设置为1的问题写入了它只会带回标准单选按钮。

尽管如此，我发现如果您使用以下语法，您可以使用带有实体样式的按钮（因为它们应该按照文档的原始语法显示）

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

<input id="choice_2" name="group1" type="radio" />  
<label for="choice_2">Yellow</label>

Answer 3

请将以下css写为覆盖您自己的CSS文件。

[type="radio"]:not(:checked), [type="radio"]:checked {
     position: relative; 
     opacity: 1; 
}

仅供参考，负责隐形单选按钮的代码如下：

[type="radio"]:not(:checked), [type="radio"]:checked {
     position: absolute; /* This is hiding radio buttons */
     opacity: 0; /* This is hiding radio buttons */
    pointer-events: none;
}

Answer 4

要保持Materialize单选外观，只需将以下代码添加到您的样式中即可：

[type="radio"]:not(:checked) + span, [type="radio"]:checked + span {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    -webkit-transition: .28s ease;
    transition: .28s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[type="radio"] + span:before, [type="radio"] + span:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 16px;
    height: 16px;
    z-index: 0;
    -webkit-transition: .28s ease;
    transition: .28s ease
}

[type="radio"]:not(:checked) + span:before, [type="radio"]:not(:checked) + span:after,
[type="radio"]:checked + span:before, [type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before, [type="radio"].with-gap:checked + span:after {
    border-radius: 50%
}

[type="radio"]:not(:checked) + span:before, [type="radio"]:not(:checked) + span:after {
    border: 2px solid #5a5a5a
}

[type="radio"]:not(:checked) + span:after {
    -webkit-transform: scale(0);
    transform: scale(0)
}

[type="radio"]:checked + span:before {
    border: 2px solid transparent
}

[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
    border: 2px solid #26a69a
}

[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:after {
    background-color: #26a69a
}

[type="radio"]:checked + span:after {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
}

[type="radio"].with-gap:checked + span:after {
    -webkit-transform: scale(0.5);
    transform: scale(0.5)
}

[type="radio"].tabbed:focus + span:before {
    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1)
}

[type="radio"].with-gap:disabled:checked + span:before {
    border: 2px solid rgba(0, 0, 0, 0.42)
}

[type="radio"].with-gap:disabled:checked + span:after {
    border: none;
    background-color: rgba(0, 0, 0, 0.42)
}

[type="radio"]:disabled:not(:checked) + span:before, [type="radio"]:disabled:checked + span:before {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.42)
}

[type="radio"]:disabled + span {
    color: rgba(0, 0, 0, 0.42)
}

[type="radio"]:disabled:not(:checked) + span:before {
    border-color: rgba(0, 0, 0, 0.42)
}

[type="radio"]:disabled:checked + span:after {
    background-color: rgba(0, 0, 0, 0.42);
    border-color: #949494
}

Answer 5

属性标签应与单选按钮ID相同。

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

<input id="choice_2" name="group1" type="radio" />  
<label for="choice_2">Yellow</label>

Answer 6

问题似乎是文件中脚本标记的位置。

我从materialize网站复制了代码，但我将链接标记放在头部，脚本标记放在正文中，首先是jquery，然后实现。这样您就不需要额外的css文件。

Answer 7

为简单起见，您可以尝试一下

<p>
  <input class="with-gap" name="group1" type="radio" id="red" checked />
  <label for="red">Red</label>
</p>

Answer 8

只需尝试一下（这只是问题所附链接的副本：

<form action="#">
    <p>
        <input name="group1" type="radio" id="test1" />
        <label for="test1">Red</label>
    </p>
    <p>
        <input name="group1" type="radio" id="test2" />
        <label for="test2">Yellow</label>
    </p>
    <p>
        <input class="with-gap" name="group1" type="radio" id="test3"  />
        <label for="test3">Green</label>
    </p>
    <p>
        <input name="group1" type="radio" id="test4" disabled="disabled" />
        <label for="test4">Brown</label>
    </p>
</form>

Answer 9

我通过在 html 中添加样式标签将不透明度覆盖为 1 来修复相同的错误

materialize css set radio opacity 为 0，我们必须将其撤消为 1

how to fix this issue, click here

or issue 2 , click here

您的 html 添加以下样式标记以覆盖它

                        <!--   bug fix,   radio button is hidden at openlayer base map switcher, due to materialize css set radio opacity to 0 , fix by undo opacity to 1 -->

                                  <!--  issue and fix
                                      https://github.com/walkermatt/ol-layerswitcher/issues/388
                                      https://github.com/walkermatt/ol-layerswitcher-examples/issues/2
                                      https://stackoverflow.com/questions/49757521/materialize-css-radio-buttons-not-visible
                                    -->
                                  
                                    
                                  <style>
                                        [type="radio"]:not(:checked), [type="radio"]:checked {
                                            position: relative; 
                                            opacity: 1; 
                                        }
                                            
                                  </style>

                        <!--   bug fix,   radio button is hidden at openlayer base map switcher, due to materialize css set radio opacity to 0 , fix by undo opacity to 1 -->

实现css单选按钮不可见

9 个答案: