Question

我试图让我的单选按钮看起来像复选框。我已经做好了，但是当我试图用颜色填充它时我面临的问题。在默认阶段意味着它是白色的，当我点击它时它填充黑色。但现在我想把它作为基于标题的不同颜色，当我点击它时应该只填充那种颜色。我该怎么做？

<label class="active">
  Email
  <span></span>
  <input type="radio" name="n1" value="email" checked>
</label>

<label>
  Phone
  <span></span>
  <input type="radio" name="n1" value="phone">
</label>

<label>
  Address
  <span></span>
  <input type="radio" name="n1" value="address">
</label>

Fiddle

Answer 1

您可以在标签上添加data-title并为其添加颜色，我创建了一个新的样式元素，它将更改单选按钮的样式属性。

请检查以下代码

$(document).ready(function() {
    $('label').click(function() {
        var title = $(this).data('title');
        $('.active').removeClass("active");
        $(this).addClass("active");
        $("<style> label.active span:after{ background-color: "+title+";} </style>").appendTo("head");
    });
    $('input:checked').trigger('click');
});

label {
    width: 125px;
    display: block;
    float: left;
}

label input {
    display: none;
}

label span {
    display: block;
    width: 17px;
    height: 17px;
    border: 1px solid black;
    float: left;
    margin: 0 5px 0 0;
    position: relative;
}

label.active span:after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
    background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<label class="active" data-title='red'>
    Email
    <span></span>
    <input type="radio" name="n1" value="email" checked>
</label>
<label data-title='green'>
    Phone
    <span></span>
    <input type="radio" name="n1" value="phone">
</label>
<label data-title='blue'>
    Address
    <span></span>
    <input type="radio" name="n1" value="address">
</label>
<label data-title='orange'>
    Address2
    <span></span>
    <input type="radio" name="n1" value="address">
</label>
<label data-title='#ff11dd'>
    Using Color Code
    <span></span>
    <input type="radio" name="n1" value="address">
</label>

Answer 2

基于标题（或值）有不同的颜色......我认为只用CSS就可以了。

报复时，由于您确切知道他们的订单，您可以使用nth-child(n)设置不同的颜色。

尝试：

label:nth-child(1).active span:after {
  background: red;
}
label:nth-child(2).active span:after {
  background: orange;
}
label:nth-child(3).active span:after {
  background: green;
}

Updated Fiddle

单选按钮充满了颜色

2 个答案: