如何使用不帶圖像的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>