Horizontal Radio-Buttom Custom Design

Question

ich ohne Erfolg dieses Design Radio-Button-Design zu erreichen versucht

ich Bootstrap für meine Seite bin mit, aber alles kann ich erreichen, ist dies:

Dies ist mein Code:

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

So wird der Code im Wesentlichen mit den Radiobuttons und Etiketten für die Herstellung eines benutzerdefinierten Optionsfeld einige cols, dann angewendet I eine graue Linie (eine img) an alle cols in der ersten Reihe für die Ermöglichung Zeigen der Hintergrundlinie, aber diese Methode deckt den gesamten Spaltenhintergrund ab; dann in einer anderen Zeile setzen Sie die Menge Etiketten, diese haben auch reaktionsfähige Probleme, wenn Sie den Bildschirm verkleinern die Menge Etiketten zu nahe kommt.

Hilfe würde gerne meinen Weg beleuchten, danke.

Answer 1

Verwenden Sie ID- und Namensattribute für Ihren Eingabetyp = "radio". Optionsfelder mit demselben Namen können nur als eine "Gruppe" verwendet werden. Keine Notwendigkeit, 'span' innerhalb 'Etiketten' zu verwenden.

Weiße Hintergrundzeile wird mit CSS pseudo element ": nach" formatiert. Keine Notwendigkeit, Hintergrundbilder zu verwenden. Um zu vermeiden, dass die Hintergrundlinie über das letzte Optionsfeld hinaus expandiert, wurde die Eigenschaft "content" für das letzte div auf "none" gesetzt. Dies wird erreicht mit 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">