Question

我已经将单选按钮设置为全角，可以环绕文本，使整个文本成为单选按钮。

这是我用来使单选按钮看起来像按钮的代码：

.list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf- 
field-element li label {
margin-left:0em;}

label.radio {
cursor: pointer;
}

label.radio input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}


.list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf- 
field-element li label {
padding: 7px 14px;
border: 2px solid #EEE;
display: inline-block;
color: #009BA2;
border-radius: 3px;
text-transform: uppercase;
text-align:center;
}

input[type=checkbox], input[type=radio] {
visibility: hidden;
margin: 0;
width: 0!important;
}

input[type=checkbox] + label, input[type=radio] + label { 
font-size: 16px; 
}

input[type=checkbox] + label:hover, input[type=radio] + label:hover { 
cursor: pointer; }

input[type=checkbox] + label:before, input[type=radio] + label:before{
font-family: "ETmodules";
font-size: 36px;
position: relative;
top: 0.3em;
margin-right: 0.2em;
}

但是，当选择单选按钮时，我无法更改框的边框颜色。

html用于单选按钮

<div class="nf-field-element"><ul aria-describedby="nf-error-37">

<li>
    <input type="radio" id="nf-field-37-0" name="nf-field-37" class="ninja-forms-field nf-element nf-checked" value="Physical Product" aria-labelledby="nf-label-class-field-37-0">
    <label for="nf-field-37-0" id="nf-label-class-field-37-0" class="nf-checked-label">Physical Product</label>
</li>
<li>
    <input type="radio" id="nf-field-37-1" name="nf-field-37" class="ninja-forms-field nf-element" value="Digital Product" aria-labelledby="nf-label-class-field-37-1">
    <label for="nf-field-37-1" id="nf-label-class-field-37-1" class="">Digital Product</label>
</li>
<li>
    <input type="radio" id="nf-field-37-2" name="nf-field-37" class="ninja-forms-field nf-element" value="Subscription" aria-labelledby="nf-label-class-field-37-2">
    <label for="nf-field-37-2" id="nf-label-class-field-37-2" class="">Subscription</label>
</li>
<li>
    <input type="radio" id="nf-field-37-3" name="nf-field-37" class="ninja-forms-field nf-element" value="Service" aria-labelledby="nf-label-class-field-37-3">
    <label for="nf-field-37-3" id="nf-label-class-field-37-3" class="">Service</label>
</li>
</ul></div>

单击时将此类添加到输入中

nf-checked

并且单击时将此类添加到标签

nf-checked-label

Answer 1

找到了如何定位选中的单选按钮css

   lat1 long1 state           county   lat2  long2
0     .     .    AK   Aleutians West   11.0   23.0
1     .     .    AK     Wade Hampton   33.0   11.0
2     .     .    AK      North Slope   55.0   11.0
3     .     .    AK  Kenai Peninsula   44.0   11.0
4     .     .    AK        Anchorage   11.0   11.0
5     1     2    AK        Anchorage    NaN    NaN
6     .     .    AK        Anchorage   55.0   44.0
7     3     4    AK        Anchorage    NaN    NaN
8     .     .    AK        Anchorage    3.0    2.0
9     .     .    AK        Anchorage    5.0   11.0
10    .     .    AK        Anchorage   42.0   22.0
11    .     .    AK        Anchorage   11.0    2.0
12    .     .    AK        Anchorage  444.0    1.0
13    .     .    AK        Anchorage    1.0    2.0
14    0     2    AK        Anchorage    NaN    NaN
15    .     .    AK        Anchorage    1.0    1.0
16    .     .    AK        Anchorage  111.0   11.0

显示选中的单选按钮-忍者表格

1 个答案: