物化css单选按钮不可见答案

【问题标题】：Materialize css Radio buttons not visible物化css单选按钮不可见
【发布时间】：2018-09-20 07:16:05
【问题描述】：

我正在尝试在我的页面上添加物化单选按钮，但由于某种原因，实际单选按钮没有显示，这是一个共享点站点，我在其中链接到物化 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

【问题讨论】：

您好，您应该在问题中发布您的 html 和 css。您可以阅读如何发布最低要求的问题
你有没有得到解决方案？我也看到了同样的情况——即使是示例中的代码也不起作用。

标签： css materialize

【解决方案1】：

我通过在 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 -->

【讨论】：

【解决方案2】：

试试这个（它只是问题中所附链接的副本：

<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>

【讨论】：

【解决方案3】：

属性标签应与单选按钮 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>

【讨论】：

【解决方案4】：

为了简单，你可以试试这个

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

【讨论】：

【解决方案5】：

要保持 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
}

【讨论】：

【解决方案6】：

我遇到了同样的错误，正如 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>

【讨论】：

【解决方案7】：

似乎问题出在文件中脚本标签的位置。

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

【讨论】：

【解决方案8】：

我在 chrome 中查看了谷歌开发者工具 (F12)。

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

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

Materialize 展示标准代码示例：

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

但是你的代码：

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

【讨论】：

制作opacity: 1; 只带回标准复选框而不是具体化。
这应该是正确的答案，只是使用 Materialize 自己的表单示例（输入周围带有标签标签）显示了正确的单选按钮。

【解决方案9】：

请在下面写下 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;
}

【讨论】：

是的，将不透明度设置为 1 将带回标准单选按钮，但这不是 google 实现的方式应该处理的。相反，它使用了从网站上的工作示例中可以看出的前后跨度。