如何使用没有图像的CSS设置跨度单选按钮的样式

Question

我试过用css设置这些单选按钮的样式，但我无法弄清楚为什么它不会样式。我想要一个30px×30px的单选按钮，带有3px的蓝色边框，单选按钮的内部是白色的，带有一个黑点，这是经过检查的。任何帮助将不胜感激。

Create()

Answer 1

您可以更改大小，但除非您需要方形边框，否则无法使用CSS在单选按钮周围添加边框 - 在这种情况下，它将是按钮周围的元素，而不是按钮本身的样式。要更改按钮的大小，您的类需要使用输入标记。将您的类放在下面示例中的内联样式的位置。

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

Answer 2

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

第1点：使用标签并核心使用。您正在使用span，您应该使用label。要将label与表单元素相关联，请使用for属性和表单元素中的Id。 label为用户提供了点击此处的内容。

第2点：使用CSS选择器进行排序非常重要。如果您的选择器为input + label，则输入后，标签标记必须 >

第3点：了解有关职位的意见：相关和立场：绝对

最终，解决方案：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

＆＃13;

＆＃13;

[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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;