变色材料设计
变色材料设计
提问于 2017-11-10 04:52:25
我需要改变材料css单选按钮的颜色(与间隙类型为橙色)
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
.with-gap[type="radio"].filled-in:checked + label:after{
border: 2px solid #ff9800;
background-color: #ff9800;
}
<p>
<input class="with-gap" name="group1" type="radio" id="test3" />
<label for="test3">Green</label>
</p>回答 7
Stack Overflow用户
回答已采纳
发布于 2021-11-14 02:03:16
我知道这是个老问题，但最近我遇到了一个类似的问题，那就是物化单选按钮着色。我正在创建一个带有pass，失败，不检查和不适用的输入的调查表单，并且需要四个单选按钮是不同的颜色。我在每个span中添加了一个额外的类，并将这个类作为CSS的目标，以覆盖物化的标准样式。我很高兴传球选择器是标准的物化绿色。
HTML：
<label>
<input type="radio" id="answer_1" name="answer_1" value="Pass"/>
<span class="span-pass">Pass</span>
</label>
<label>
<input type="radio" id="answer_1" name="answer_1" value="Fail"/>
<span class="span-fail">Fail</span>
</label>
<label>
<input type="radio" id="answer_1" name="answer_1" value="NC"/>
<span class="span-nc">Not Checked</span>
</label>
<label>
<input type="radio" id="answer_1" name="answer_1" value="NA"/>
<span class="span-na">Not Applicable</span>
</label>CSS：
[type="radio"]:checked+span.span-fail:after, [type="radio"].with-gap:checked+span.span-fail:after {
background-color: red;
border: 2px solid red;
}
[type="radio"]:checked+span.span-nc:after, [type="radio"].with-gap:checked+span.span-nc:after {
background-color: orange;
border: 2px solid orange;
}
[type="radio"]:checked+span.span-na:after, [type="radio"].with-gap:checked+span.span-na:after {
background-color: #555;
border: 2px solid #555;
}希望这对外面的人有帮助。
Stack Overflow用户
发布于 2017-11-10 05:08:03
把这个[type="radio"].with-gap:checked+label:after { background-color: orange !important; }
这是示例
Stack Overflow用户
发布于 2017-11-10 05:12:25
试试这个，我希望它能起作用。
[type="radio"]:checked + label::after, [type="radio"].with-gap:checked + label::after {
background-color: rgb(255, 138, 6) !important;
}
[type="radio"]:checked + label::after, [type="radio"].with-gap:checked + label::before, [type="radio"].with-gap:checked + label::after {
border: 2px solid rgb(255, 138, 6) !important;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<style>
</style>
<p>
<input class="with-gap" name="group1" type="radio" id="test3" />
<label for="test3">Green</label>
</p>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47215861
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号