将CSS边框更改为选中的输入类型单选

时间：2017-05-04 18:27:40

标签： css

我正在尝试选择单选按钮时，将其收音机更改为蓝色。但是我不能。这是我的CSS代码：

/* Estilo Radio Button */
.radio {
    padding-left: 25px; 
}

.radio label {
    display: inline-block;
    position: relative;
    padding-left: 0px;
}

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    border-color: #ddd !important;
    outline: 0 !important;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; 
}

.radio label:hover:before {
    border-color: rgba(82, 168, 236, 0.8) !important;
    outline: 0 !important;
    outline: thin dotted \9 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 
}

.radio input[type="radio"] {
    opacity: 0; 
}

.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; 
}

.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(0.75, 0.75);
    -ms-transform: scale(0.75, 0.75);
    -o-transform: scale(0.75, 0.75);
    transform: scale(0.75, 0.75);
}

.radio input[type="radio"]:disabled + label {
    opacity: 0.65; 
}

.radio input[type="radio"]:disabled + label::before {
    cursor: not-allowed; 
}

.radio.radio-inline {
    margin-top: 0; 
}

.radio-primary input[type="radio"] + label::after {
    background-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::before {
    border-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::after {
    background-color: #428bca; 
}


.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f; 
}

.radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f; 
}

.radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f; 
}

.radio-info input[type="radio"] + label::after {
    background-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de; 
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e; 
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e; 
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e; 
}

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c; 
}

如果我改变了这个：

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    //HERE!!!
    border-color: blue !important;
    outline: 0 !important;
    background-color: blue;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; 
}

更改所有单选按钮边框。我只是检查单选按钮。我怎么能这样做？谢谢。

3 个答案:

答案 0 :(得分：1)

根据您的CSS和Roko编写的代码，我认为您只需要这个新规则。您有这样的规则，但它们仅适用于具有特定类的控件。需要!important，因为.radio label::before的规则!important具有border-color样式

.radio input[type="radio"]:checked + label::before {
    border-color: blue !important;
}

答案 1 :(得分：0)

您发布的代码没有任何问题 如果您无法使:checked州工作，那只意味着您错过了id=""和标签for=""属性。

这个演示看起来像sh * t，但它是你需要pimp-up的CSS

＆＃13;
＆＃13; 
/* Estilo Radio Button */
.radio {
    padding-left: 25px; 
}

.radio label {
    display: inline-block;
    position: relative;
    padding-left: 0px;
}

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    border-color: #ddd !important;
    outline: 0 !important;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; 
}

.radio label:hover:before {
    border-color: rgba(82, 168, 236, 0.8) !important;
    outline: 0 !important;
    outline: thin dotted \9 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 
}

.radio input[type="radio"] {
    opacity: 0; 
}

.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; 
}

.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(0.75, 0.75);
    -ms-transform: scale(0.75, 0.75);
    -o-transform: scale(0.75, 0.75);
    transform: scale(0.75, 0.75);
}

.radio input[type="radio"]:disabled + label {
    opacity: 0.65; 
}

.radio input[type="radio"]:disabled + label::before {
    cursor: not-allowed; 
}

.radio.radio-inline {
    margin-top: 0; 
}

.radio-primary input[type="radio"] + label::after {
    background-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::before {
    border-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::after {
    background-color: #428bca; 
}


.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f; 
}

.radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f; 
}

.radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f; 
}

.radio-info input[type="radio"] + label::after {
    background-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de; 
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e; 
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e; 
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e; 
}

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c; 
}
＆＃13; 
<span class="radio">
  <input type="radio" id="r1" name="r">
  <label for="r1"></label>
</span>

<span class="radio">
  <input type="radio" id="r2" name="r">
  <label for="r2"></label>
</span>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

您无法更改单选按钮样式，因为它是本机浏览器元素。

How do I change the color of radio buttons?

您可以尝试覆盖psuedo元素，就像使用标签一样。但只是另一个具有更高z-index的单选按钮

相关问题
最新问题