时间戳

首页 > 解决方案 > 显示选中的单选按钮 - Ninja Forms

css - 显示选中的单选按钮 - Ninja Forms

问题描述

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

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

.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

标签： csswordpressradio-buttonninja-forms

解决方案

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

input[type=radio]:checked + label {
  ...code here
}

推荐阅读