臥式收音機BUTTOM定製設計

Question

我一直在努力，但沒有成功

我用引導我的網站達到這個設計單選按鈕設計，但所有我能達到的是：

這是我的代碼：

.content {background-color: #42d5b9; padding: 50px} 
 

 
.amount-landing {text-align: center;} 
 
.amount-landing label {color: #FFFFFF;} 
 
.amount-landing > .col-xs-2 {background: url(https://i.imgur.com/K8Nz8Y2.png) repeat-x; background-position: 0 12px;} 
 

 
.amount-landing input[type="radio"] { 
 
    display:none; 
 
} 
 

 
.amount-landing input[type="radio"] + label span { 
 
    display:inline-block; 
 
    width:15px; 
 
    height:15px; 
 
    margin:0px 0px 0 0; 
 
    vertical-align:middle; 
 
    background: #FFFFFF; 
 
    cursor:pointer; 
 
    border-radius: 50%; 
 
} 
 

 
.amount-landing input[type="radio"]:checked + label span { 
 
    background: #101B27; 
 
}

  <div class="content "> 
 
      <div class="form-group"> 
 
      <div class="row amount-landing gray-line"> 
 
       <div class="col-xs-2 col-xs-offset-1"><input type="radio"><label for="amount1"><span></span></label></div> 
 
       <div class="col-xs-2"><input type="radio"><label for="amount2"><span></span></label></div> 
 
       <div class="col-xs-2"><input type="radio"><label for="amount3"><span></span></label></div> 
 
       <div class="col-xs-2"><input type="radio"><label for="amount4"><span></span></label></div> 
 
       <div class="col-xs-2"><input type="radio"><label for="amount5"><span></span></label></div> 
 
      </div> 
 
      <!-- This shows radio buttons --> 
 

 

 
      <div class="row text-center" style="font-size: 14px;color: #FFFFFF;line-height: 14px;"> 
 
       <div class="col-xs-1"></div> 
 
       <div class="col-xs-2">0$</div> 
 
       <div class="col-xs-2">1$<br>-<br>1000$</div> 
 
       <div class="col-xs-2">1001$<br>-<br>2001$</div> 
 
       <div class="col-xs-2">2001$<br>-<br>3000$</div> 
 
       <div class="col-xs-2">More than<br>3000$</div> 
 
       <div class="col-xs-1"></div> 
 
      </div> 
 
      <!-- This shows numbers --> 
 

 
      </div> 
 
     </div> 
 
     
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    

所以，代碼基本上是一些COLS與無線電按鈕和標籤用於製造定製的單選按鈕，然後我施加灰線（是一個img），以所有的cols第一行中對使顯示背景線，但此方法涵蓋所有​​列背景;然後在另一行放置標籤數量，當您縮小屏幕時，標籤數量太接近，這也會產生相應的問題。

幫助將讚賞點亮我的路徑，謝謝。

Answer 1

將id和name屬性用於您的輸入類型=「radio」。具有相同名稱的單選按鈕只能用作一個「組」。無需在'標籤'內使用'span'。

白色背景線使用CSS pseudo element「：after」。不需要使用背景圖像。爲了避免背景線擴展到最後一個單選按鈕之外，爲最後一個div製作「content」屬性爲none。這是使用CSS pseudoclass「：last-of-type」實現的。

.content {background-color: #42d5b9; padding: 50px;} 
 

 
.amount-landing {text-align: center;} 
 
.amount-landing label {color: #FFFFFF;} 
 
.amount-landing .amount-col { 
 
position: relative;} 
 
.amount-landing .amount-col:after { 
 
content: ""; 
 
position:absolute; 
 
width: 100%; 
 
height: 2px; 
 
background-color: #fff; 
 
top: 50%; 
 
} 
 
.amount-landing .amount-col:last-of-type:after { 
 
content: none; 
 
} 
 
.amount-landing input[type="radio"] { 
 
    display:none; 
 
} 
 

 
.amount-landing input[type="radio"] + label { 
 
    display:inline-block; 
 
    width: 20px; 
 
    height:20px; 
 
    margin:0px 0px 0 0; 
 
    vertical-align:middle; 
 
    background: #FFFFFF; 
 
    cursor:pointer; 
 
    border-radius: 50%; 
 
} 
 

 
.amount-landing input[type="radio"]:checked + label { 
 
    background: #101B27; 
 
}

<div class="content "> 
 
      <div class="form-group"> 
 
      <div class="row amount-landing gray-line"> 
 
       <div class="col-xs-2 col-xs-offset-1 amount-col"><input type="radio" id="amount1" name="amount"><label for="amount1"></label></div> 
 
       <div class="col-xs-2 amount-col"><input type="radio" id="amount2" name="amount"><label for="amount2"></label></div> 
 
       <div class="col-xs-2 amount-col"><input type="radio" id="amount3" name="amount"><label for="amount3"></label></div> 
 
       <div class="col-xs-2 amount-col"><input type="radio" id="amount4" name="amount"><label for="amount4"></label></div> 
 
       <div class="col-xs-2 amount-col"><input type="radio" id="amount5" name="amount"><label for="amount5"></label></div> 
 
      </div> 
 
      <!-- This shows radio buttons --> 
 

 

 
      <div class="row text-center" style="font-size: 13px;color: #FFFFFF;line-height: 15px;"> 
 
       <div class="col-xs-1"></div> 
 
       <div class="col-xs-2">0$</div> 
 
       <div class="col-xs-2">1$-1000$</div> 
 
       <div class="col-xs-2">1001$-2001$</div> 
 
       <div class="col-xs-2">2001$-3000$</div> 
 
       <div class="col-xs-2">More than 3000$</div> 
 
       <div class="col-xs-1"></div> 
 
      </div> 
 
      <!-- This shows numbers --> 
 

 
      </div> 
 
     </div> 
 
     
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">