Html 如何更改单选和复选框输入的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25793716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change style of radio and checkbox input
提问by mmvsbg
I have a website where I'm trying to change the background color of the dot of a radio button. Right now it seems to be transparent so it gets the color of whatever the background is. I tried using CSS and setting "background: white;"for example, however this has no effect in the browser. Any ideas of cool tricks to use to achieve this?
我有一个网站，我正在尝试更改单选按钮点的背景颜色。现在它似乎是透明的，所以它获得了任何背景的颜色。"background: white;"例如，我尝试使用 CSS 和设置，但这在浏览器中不起作用。有什么很酷的技巧可以用来实现这一目标吗？
Same question stands for checkbox as well.
同样的问题也代表复选框。
回答by Roko C. Buljan
This technique uses the labelelement bound to hidden inputelements, that receiving a :checkedstate will change the apperance of the :beforepseudo element:
这种技术使用label绑定到隐藏input元素的元素，接收:checked状态将改变:before伪元素的外观：
/* COMMON RADIO AND CHECKBOX STYLES */
input[type=radio],
input[type=checkbox]{
/* Hide original inputs */
visibility: hidden;
position: absolute;
}
input[type=radio] + label:before,
input[type=checkbox] + label:before{
height:12px;
width:12px;
margin-right: 2px;
content: " ";
display:inline-block;
vertical-align: baseline;
border:1px solid #777;
}
input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before{
background:gold;
}
/* CUSTOM RADIO AND CHECKBOX STYLES */
input[type=radio] + label:before{
border-radius:50%;
}
input[type=checkbox] + label:before{
border-radius:2px;
}<input type="radio" name="r" id="r1"><label for="r1">Radio 1</label>
<input type="radio" name="r" id="r2"><label for="r2">Radio 2</label>
<input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label>
<input type="checkbox" name="c2" id="c2"><label for="c2">check 2</label> 回答by LcSalazar
It's been well stablished that you cannot change every detail on browser generated controls. For example the color of the arrow on a select dropdown, or the dot of a radio, etc...
众所周知，您无法更改浏览器生成的控件上的每个细节。例如，选择下拉菜单上箭头的颜色，或收音机的点等...
You can create your custom controls, use some library like JQuery UI, or.... maybe play around a little with css.
你可以创建你的自定义控件，使用一些像 JQuery UI 这样的库，或者......也许会玩一点 css。
Here's an experiment to fake a colored dot on a radio, using :beforepseudo element:
这是一个使用:before伪元素在收音机上伪造彩色圆点的实验：
input[type="radio"]:checked:before {
content: "";
display: block;
position: relative;
top: 3px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: red;
}
Result:
结果：
回答by Ken Gregory
The preferred method for styling the non-label elements of checkboxes and radio buttons with CSS is to essentially replace them with images that represent their current state (unchecked, checked, etc).
使用 CSS 为复选框和单选按钮的非标签元素设置样式的首选方法是将它们本质上替换为代表其当前状态（未选中、选中等）的图像。
See this article by Ryan Seddon: http://www.thecssninja.com/css/custom-inputs-using-css
请参阅 Ryan Seddon 的这篇文章：http: //www.thecssninja.com/css/custom-inputs-using-css
回答by Devin
There are many ways to do this, all of them involve to get rid of the DOM styles since it's impossible to do it without these "tricks". Here's a sample by Chris Coyier(just read the page, skip step 1 and simply prepare teh images and CSS)
有很多方法可以做到这一点，所有这些都涉及摆脱 DOM 样式，因为没有这些“技巧”就不可能做到这一点。这是Chris Coyier的示例（只需阅读页面，跳过步骤 1，只需准备图像和 CSS）
/*
Hide the original radios and checkboxes
(but still accessible)
:not(#foo) > is a rule filter to block browsers
that don't support that selector from
applying rules they shouldn't
*/
li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {
/* Hide the input, but have it still be clickable */
opacity: 0;
float: left;
width: 18px;
}
li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
margin: 0;
clear: none;
/* Left padding makes room for image */
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(off.png) left center no-repeat;
}
/*
Change from unchecked to checked graphic
*/
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
background-image: url(radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
background-image: url(check.png);
}
回答by Tricky12
The browser itself handles the look of radio buttons and checkboxes, as well as dropdown/selects. You can however hide the radio buttons, replace them with images, and then modify your radio/check value using jQuery. Font Awesome (http://fortawesome.github.io/Font-Awesome/icons/) has some cool icons that you can use for this.
浏览器本身处理单选按钮和复选框的外观，以及下拉/选择。然而，您可以隐藏单选按钮，用图像替换它们，然后使用 jQuery 修改您的单选/检查值。Font Awesome ( http://fortawesome.github.io/Font-Awesome/icons/) 有一些很酷的图标，你可以使用它。
<div>
Radio 1 -
<input type="radio" name="radio" class="radio" value="1" />
<span class="red fa fa-circle-o"></span>
</div>
<div>
Radio 2 -
<input type="radio" name="radio" class="radio" value="2" />
<span class="blue fa fa-circle-o"></span>
</div>
$('span.fa').on('click', function() {
$('span.fa').removeClass('fa fa-dot-circle-o').addClass('fa fa-circle-o');
$(this).removeClass('fa-circle-o').addClass('fa-dot-circle-o');
//Check corresponding hidden radio
$(this).prev('input.radio').prop('checked', true);
});
回答by programmer1490
You can style ionic radio buttons using css alone. Check the fiddle:
您可以单独使用 css 设置离子单选按钮的样式。检查小提琴：
https://jsfiddle.net/sreekanthjayan/0d9vj86k/
https://jsfiddle.net/sreekanthjayan/0d9vj86k/
<div>
<ion-radio class="radio radio-inline radio-gray" ng-model="choice" ng-value="'A'">iOS</ion-radio>
<ion-radio class="radio radio-inline radio-teal" ng-model="choice" ng-value="'B'">Android</ion-radio>
<ion-radio class="radio radio-inline radio-blue" ng-model="choice" ng-value="'C'">Windows Phone</ion-radio>
</div>
.radio .radio-icon {
visibility: visible !important;
}
.radio .radio-icon:before {
content: "" !important;
border: 2px solid black !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
overflow: hidden !important;
}
.radio .radio-icon:after {
content: "" !important;
position: absolute !important;
right: 20px !important;
top: 22px !important;
background: black !important;
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
overflow: hidden !important;
transition: -webkit-transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650);
transition: transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650);
-webkit-transform: scale(0);
transform: scale(0);
}
.radio.item-radio > input[type=radio]:checked ~ .radio-icon:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.radio .item-content {
background-color: #fff;
margin: 0;
padding-right: 50px;
padding-left: 0px;
}
.radio.item-radio > input[type=radio]:checked ~ .item-content {
background-color: #fff;
}
.radio-inline.item {
display: inline-block;
border: none;
margin: 0;
height: 50px;
}
.radio-blue .radio-icon:after {
background: #2196F3 !important;
}
.radio-blue .radio-icon:before {
border-color: #2196F3 !important;
}
.radio-teal .radio-icon:after {
background: #009688 !important;
}
.radio-teal .radio-icon:before {
border-color: #009688 !important;
}
.radio-gray .radio-icon:after {
background: #B6B6B6 !important;
}
.radio-gray .radio-icon:before {
border-color: #B6B6B6 !important;
}
