html的radio改变颜色,样式

发布网友发布时间：2022-04-06 11:33

共3个回答

懂视网时间：2022-04-06 15:55

本篇文章给大家带来的内容是关于如何利用纯CSS改变html？radio/checkbox默认背景颜色样式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

微信截图_20181011144116.png

CSS代码：

input[type=checkbox] {
 margin-right: 5px;
 cursor: pointer;
 font-size: 14px;
 width: 15px;
 height: 12px;
 position: relative;
}
input[type=checkbox]:after {
 position: absolute;
 width: 10px;
 height: 15px;
 top: 0;
 content: " ";
 background-color: #ff0000;
 color: #fff;
 display: inline-block;
 visibility: visible;
 padding: 0px 3px;
 border-radius: 3px;
}
input[type=checkbox]:checked:after {
 content: "?";
 font-size: 12px;
}
input[type=radio] {
 margin-right: 5px;
 cursor: pointer;
 font-size: 14px;
 width: 15px;
 height: 12px;
 position: relative;
}
input[type=radio]:after {
 position: absolute;
 width: 10px;
 height: 15px;
 top: 0;
 content: " ";
 background-color: #ff0000;
 color: #fff;
 display: inline-block;
 visibility: visible;
 padding: 0px 3px;
 border-radius: 50%;
}
input[type=radio]:checked:before {
 content: "?";
 display: block;
 position: relative;
 top: -2px;
 left: 3px;
 width: 6px;
 height: 6px;
 color: #fff;
 font-weight: 400;
 z-index: 1;
}

HTML 示例：

<input type="checkbox" name="method" value="plus" checked>plus<br>
<input type="checkbox" name="method" value="minus">minus<br>
<input type="radio" name="method" value="plus">plus<br>
<input type="radio" name="method" value="minus" checked>minus<br>

热心网友时间：2022-04-06 13:03

既然样式无法实现，就通过其他方法实现他，如果想要美观，我一般会通过图片和脚本自己写select或者radio，因为系统的实在太丑，而且效果也很差劲！

热心网友时间：2022-04-06 14:21

radio是指单选按钮，html中的radio是无法改变改变样式跟颜色的。这是由系统决定的，我想任何人也改变不了它的样式跟颜色。
刚开始竟然没看清，以为问的是普通按钮，最后才发现是单选按钮！
普通按钮可以变，单选按钮是无法变的。