如何使用不带图像的CSS设置span单选按钮的样式

Question

我试图用CSS来设计这些单选按钮，但我无法弄清楚它为什么不会设计样式。我想要一个带有3px蓝色边框的30px×30px单选按钮，并且单选按钮的内部带有一个黑点，它是选中的一个。任何帮助，将不胜感激。

<span class="wpcf7-form-control-wrap RVCategory"> 
<span class="wpcf7-form-control wpcf7-radio"> 
     <span class="wpcf7-list-item first"> 
      <span class="wpcf7-list-item-label" style="">Motorhome 
      </span> &nbsp; 
<input type="radio" name="RVCategory" value="Motorhome" checked="checked"> 
</span> 
<span class="wpcf7-list-item last"> 
      <span class="wpcf7-list-item-label">Trailer 
      </span>&nbsp; 
<input type="radio" name="RVCategory" value="Trailer"> 
</span> 
</span> 
</span> 

Answer 1

提示1，始终包含足够的代码来复制您的问题。一旦找到小提琴，它很容易修复。

点1：使用标签标记和corectly使用它。您正在使用span，您应该使用label。要将label与表单元素相关联，请将for属性与表单元素中的Id一起使用。这是label，让用户点击这里。

点2：排序与CSS选择非常重要。如果你的选择是input + label的输入

3点后的标签，标签必须拿出：学会与位置realtionship：相关联系和立场：绝对

Finaly，解决方法：

.wpcf7-form-control-wrap.RVCategory { 
 
    max-width: 400px; 
 
    margin: 94px auto 0 auto; 
 
} 
 

 
.wpcf7-list-item label{ 
 
    position: relative; 
 
} 
 

 
.wpcf7-list-item-label, 
 
.wpcf7-list-item last { 
 
    font-size: 20px; 
 
} 
 

 
.wpcf7-form-control-wrap.RVCategory input[type="radio"] { 
 
    position: absolute; 
 
    opacity: 0; 
 
    -moz-opacity: 0; 
 
    -webkit-opacity: 0; 
 
    -o-opacity: 0; 
 
} 
 

 
.wpcf7-form-control-wrap.RVCategory input[type="radio"] + label:before { 
 
    content: ""; 
 
    /*Note inline-block*/ 
 
    display: inline-block; 
 
    top: 2px; 
 
    height: 14px; 
 
    width: 14px; 
 
    background: white; 
 
    border: 1px solid gray; 
 
    box-shadow: inset 0px 0px 0px 2px white; 
 
    -webkit-box-shadow: inset 0px 0px 0px 2px white; 
 
    -moz-box-shadow: inset 0px 0px 0px 2px white; 
 
    -o-box-shadow: inset 0px 0px 0px 2px white; 
 
    -webkit-border-radius: 8px; 
 
    -moz-border-radius: 8px; 
 
    -o-border-radius: 8px; 
 
} 
 

 
.wpcf7-form-control-wrap.RVCategory input[type="radio"]:checked + label:before { 
 
    background: #ef8700; 
 
}

<span class="wpcf7-form-control-wrap RVCategory"> 
 
    <span class="wpcf7-form-control wpcf7-radio"> 
 
      <span class="wpcf7-list-item first"> 
 
<!-- Note the order had changed 
 
    and the addition of an id 
 
--> 
 
<input type="radio" name="RVCategory" value="Motorhome" checked="checked" id="rdoMotorHome"> 
 
<!--Note the "for" attribute-->    
 
<label class="wpcf7-list-item-label" style="" for="rdoMotorHome">Motorhome 
 
       </label> 
 
</span> 
 
<span class="wpcf7-list-item last"> 
 
      
 
<input type="radio" name="RVCategory" value="Trailer" id="rdoTrailer"> 
 
<label class="wpcf7-list-item-label" for="rdoTrailer">Trailer 
 
      </label> 
 
</span> 
 
</span> 
 
</span>

Answer 2

你可以改变大小，但你不能够围绕一个单选按钮与CSS，除非你想有一个方形边框添加边框 - 在这种情况下，这将是该元件周围的按钮，而不是在风格按钮本身。要更改按钮的大小，您的班级需要使用输入标签。把你的班级放在下面例子中的内联样式中。

<input type="radio" name="RVCategory" value="Motorhome" checked="checked" style="width:30px;height:30px;"> 

Answer 3

以下是供您参考的代码，这将对您有所帮助。

[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 

 
label { 
 
    display: block; 
 
    cursor: pointer; 
 
    line-height: 2; 
 
    font-size: 20px; 
 
} 
 

 
[type="radio"] + span:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 15px; 
 
    height: 15px; 
 
    vertical-align: -0.25em; 
 
    border-radius: 10px; 
 
    border: 3px solid #fff; 
 
    box-shadow: 0 0 0 3px #000; 
 
    margin-right: 0.75em; 
 
    transition: 0.5s ease all; 
 
} 
 

 
[type="radio"]:checked + span:before { 
 
    background: black; 
 
    box-shadow: 0 0 0 0.25em #000; 
 
}

<label for="Motorhome"> 
 
<input type="radio" value="Motorhome" name="Test" id="Motorhome"> <span>Motorhome</span> 
 
</label> 
 
<label for="Trailer"> 
 
<input type="radio" value="Trailer" name="Test" id="Trailer"> <span>Trailer</span> 
 
</label>