Html 如何更改收音机和复选框输入的样式

我有一个网站，我试图改变单选按钮点的背景色。现在它看起来是透明的，所以它可以得到任何背景的颜色。例如，我尝试使用CSS和设置

“background:white；”

，但是这在浏览器中没有效果。有什么好点子可以用来达到这个目的吗

---

同样的问题也代表复选框。

众所周知，您无法更改浏览器生成控件上的每个细节。例如，选择下拉菜单上箭头的颜色，或收音机的圆点等

您可以创建自定义控件，使用JQuery UI之类的库，或者。。。。也许可以玩一下css

下面是一个利用

：在
伪元素之前，在收音机上模拟彩色点的实验：


结果：

用CSS设置复选框和单选按钮的非标签元素样式的首选方法是用表示其当前状态（未选中、选中等）的图像替换它们

请参阅Ryan Seddon的这篇文章：
有很多方法可以做到这一点，所有这些方法都涉及到摆脱DOM样式，因为没有这些“技巧”是不可能做到的。这是一个示例（只需阅读页面，跳过步骤1，只需准备图像和CSS）



此技术使用绑定到隐藏
输入
元素的
标签
元素，接收
:checked
状态将更改
:before
伪元素的外观：


/*常用收音机和复选框样式*/
输入[类型=收音机]，
输入[类型=复选框]{
/*隐藏原始输入*/
可见性：隐藏；
位置：绝对位置；
}
输入[类型=收音机]+标签：在，
输入[类型=复选框]+标签：在{
高度：12px；
宽度：12px；
右边距：2px；
内容：“；
显示：内联块；
垂直对齐：基线；
边框：1px实心#777；
}
输入[类型=收音机]：选中+标签：之前，
输入[类型=复选框]：选中+标签：之前{
背景：金；
}
/*自定义收音机和复选框样式*/
输入[类型=收音机]+标签：之前{
边界半径：50%；
}
输入[类型=复选框]+标签：在{
边界半径：2px；
}
收音机1
第二台
检查1
选中2
浏览器本身处理单选按钮和复选框的外观，以及下拉/选择。但是，您可以隐藏单选按钮，用图像替换它们，然后使用jQuery修改单选/检查值。Font Awesome（）有一些很酷的图标，您可以使用这些图标



无线电1-
第二台-
$（'span.fa'）。在（'click'，function（）上{
$（'span.fa'）.removeClass（'fa-dot-circle-o'）.addClass（'fa-circle-o'）；
$（this）.removeClass（'fa-circle-o'）.addClass（'fa-dot-circle-o'）；
//检查相应的隐藏收音机
$（this.prev（'input.radio'）.prop（'checked'，true）；
});
您可以单独使用css设置离子单选按钮的样式。检查小提琴：



网间网操作系统
安卓
Windows Phone
.收音机.收音机图标{
可见性：可见！重要；
}
.收音机.收音机图标：之前{
内容：重要；
边框：2件纯黑！重要；
宽度：24px！重要；
高度：24px！重要；
边界半径：50%！重要；
溢出：隐藏！重要；
}
.收音机.收音机图标：后{
内容：重要；
位置：绝对！重要；
右：20px！重要；
顶部：22px！重要；
背景：黑色！重要；
宽度：12px！重要；
高度：12px！重要；
边界半径：50%！重要；
溢出：隐藏！重要；
过渡：-webkit变换.28s立方贝塞尔（0.420,0.000,0.000,1.650）；
变换：变换.28s三次贝塞尔（0.420,0.000,0.000,1.650）；
-webkit变换：缩放（0）；
变换：比例（0）；
}
.radio.item-radio>input[type=radio]：选中~.radio图标：之后{
-webkit转换：规模（1）；
变换：比例（1）；
}
.收音机.项目内容{
背景色：#fff；
保证金：0；
右边填充：50px；
左侧填充：0px；
}
.radio.item-radio>输入[type=radio]：选中~.item内容{
背景色：#fff；
}
.radio-inline.item{
显示：内联块；
边界：无；
保证金：0；
高度：50px；
}
.收音机蓝色。收音机图标：后{
背景：#2196F3！重要；
}
.收音机蓝色。收音机图标：之前{
边框颜色：#2196F3！重要；
}
.收音机teal.收音机图标：后{
背景：#009688！重要；
}
.收音机teal.收音机图标：之前{
边框颜色：#009688！重要；
}
.收音机灰色。收音机图标：后{
背景：#b6b6！重要；
}
.收音机灰色。收音机图标：之前{
边框颜色：#b6b6！重要；
}
看起来很酷，遗憾的是，它不在FFT上工作，因为伪元素适用于基于Webkit的web浏览器上的
元素。@HashemQolami谢天谢地，这一问题最近得到了解决。伪元素不再与webkit上的输入一起工作。当给定PSD具有相同的无线电btn:DGreat提示时，这是多么酷啊，谢谢！这是一个很棒的把戏。干得好。
input[type="radio"]:checked:before {
    content: "";
    display: block;
    position: relative;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: red;
}

/*
    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);
}

<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);
});

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