如何自定义html中的单选按钮 [英] How to customize radio button in html
本文介绍了如何自定义html中的单选按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想尝试这样的单选按钮。
I am trying to get radio button like this..
但我变得像这样
如果未选择任何选项，我需要自定义单选按钮，它应该在里面显示白色。如果选择单选按钮，它应在框中显示绿色。如何实现这一目标？
If No option is selected, I need to customize the radio button and it should show white color inside it. If radio button is selected, it should show green color inside the box. How to achieve this?
在这里我尝试了。
index.html
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio:checked + label:after {
background: none repeat scroll 0 0 #94E325;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label {
background-color: #e9ecee;
border: 2px solid #adb8c0;
color: #99a1a7;
padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
</style>
</head>
<body>
<div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
</body>
</html>
推荐答案
只需添加：before 伪元素在选中收音机按钮之前处理颜色。您可以将此添加到您的 CSS ：
Just add the :before pseudo element to take care of the color before the radio button is checked. You could add this to your CSS:
.regular-radio + label:before {
background: none repeat scroll 0 0 #FDFDFD;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
工作演示。您可以改变此标签的背景，以与您显示的示例完全匹配。希望它有帮助。
Working demo. You can ofcourse change the background of this label to match exactly the example you show. Hope it helps.
这篇关于如何自定义html中的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
