Come pulsante di personalizzare in html

Sto cercando di ottenere pulsante di scelta in questo modo ..Come pulsante di personalizzare in html

enter image description here

Ma io sono sempre come questo

enter image description here

Se si seleziona l'opzione No , Ho bisogno di personalizzare il pulsante di opzione e dovrebbe mostrare il colore bianco al suo interno. Se il pulsante di opzione è selezionato, dovrebbe mostrare il colore verde all'interno della scatola. Come ottenere questo?

Ecco cosa ho provato.

index.html

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
<style> 
/* Radio Button CSS*/ 
label { 
    display: inline; 
} 
.radio-1 { 
    width: 193px; 
} 
.button-holder { 
    float: left; 
    margin-left: 6px; 
    margin-top: 16px; 
} 
.regular-radio { 
    display: none; 
} 
.regular-radio + label { 
    background-color: #fafafa; 
    border: 2px solid #cacece; 
    border-radius: 50px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset; 
    display: inline-block; 
    padding: 11px; 
    position: relative; 

} 
.regular-radio:checked + label:after { 
    background: none repeat scroll 0 0 #94E325; 
    border-radius: 50px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; 
    content: " "; 
    font-size: 36px; 
    height: 8px; 
    left: 7px; 
    position: absolute; 
    top: 7px; 
    width: 8px; 
} 
.regular-radio:checked + label { 
    background-color: #e9ecee; 
    border: 2px solid #adb8c0; 
    color: #99a1a7; 
    padding: 11px; 
} 
.regular-radio + label:active, .regular-radio:checked + label:active { 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
} 
</style> 
    </head> 
    <body> 
<div class="button-holder"> 
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br> 
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br> 
</div> 
    </body> 
</html>

fonte

2014-10-09 UI_Dev

basta aggiungere il pseudo elemento :before di prendersi cura del colore prima che il pulsante radio sia selezionata. Si potrebbe aggiungere questo alla tua CSS:

.regular-radio + label:before { 
    background: none repeat scroll 0 0 #FDFDFD; 
    border-radius: 50px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; 
    content: " "; 
    font-size: 36px; 
    height: 8px; 
    left: 7px; 
    position: absolute; 
    top: 7px; 
    width: 8px; 
}

Working demo. Ovviamente puoi cambiare il di questa etichetta in modo che corrisponda esattamente all'esempio che mostri. Spero che sia d'aiuto.

fonte

2014-10-09 04:26:46

input[type=radio].css-checkbox { 
    position: absolute; 
    z-index: -1000; 
    left: -1000px; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    width: 1px; 
    margin: -1px; 
    padding: 0; 
    border: 0; 
} 
input[type=radio].css-checkbox + label.css-label { 
    padding-left: 30px; 
    height: 25px; 
    display: inline-block; 
    line-height: 25px; 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    font-size: 25px; 
    vertical-align: middle; 
    cursor: pointer; 
} 
input[type=radio].css-checkbox:checked + label.css-label { 
    background-position: 0 -25px; 
} 
label.css-label { 
    background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_98809849d4d88f570f5ad4ce6c2be5b1.png); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

check-out questa fiddle.

fonte

2014-10-09 04:26:02

È necessario formattare il pulsante di opzione sia deselezionare che controllare.

È possibile trovare il codice di blocco anwser segue:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style> 
     /* Radio Button CSS*/ 
     label { 
      display: inline; 
     } 
     .radio-1 { 
      width: 193px; 
     } 
     .button-holder { 
      float: left; 
      margin-left: 6px; 
      margin-top: 16px; 
     } 
     .regular-radio { 
      display: none; 
     } 
     .regular-radio + label { 
      background-color: #fafafa; 
      border: 2px solid #cacece; 
      border-radius: 50px; 
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset; 
      display: inline-block; 
      padding: 11px; 
      position: relative; 

     } 
     .regular-radio:checked + label:after { 
      background: none repeat scroll 0 0 #94E325; 
      border-radius: 50px; 
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; 
      content: " "; 
      font-size: 36px; 
      height: 8px; 
      left: 7px; 
      position: absolute; 
      top: 7px; 
      width: 8px; 
     } 


     .regular-radio:checked + label { 
      background-color: #e9ecee; 
      border: 2px solid #adb8c0; 
      color: #99a1a7; 
      padding: 11px; 
     } 
     .regular-radio + label:active, .regular-radio:checked + label:active { 
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
     } 

     /*----------------hungtq added--------------*/ 
     .regular-radio + label:before { 
      background: none repeat scroll 0 0 #e9ecee; 
      border-radius: 50px; 
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; 
      content: " "; 
      font-size: 36px; 
      height: 8px; 
      left: 7px; 
      position: absolute; 
      top: 7px; 
      width: 8px; 
     } 
    </style> 
</head> 
<body> 
<div class="button-holder"> 
    <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br> 
    <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br> 
</div> 
</body> 
</html>

Risultato: enter image description here

fonte

2014-10-09 04:33:24

è possibile ottenere layout desiderato in due modi

Via rimozione aspetto standard utilizzando i CSS appearance e applicare l'aspetto personalizzato. Purtroppo questo non funziona in IE per Desktop (ma funziona in IE per Windows Phone). Demo:

input[type="radio"] { 
 
    /* remove standard background appearance */ 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    /* create custom radiobutton appearance */ 
 
    display: inline-block; 
 
    width: 25px; 
 
    height: 25px; 
 
    padding: 6px; 
 
    /* background-color only for content */ 
 
    background-clip: content-box; 
 
    border: 2px solid #bbb; 
 
    background-color: #e7e6e7; 
 
    border-radius: 50%; 
 
} 
 

 
/* appearance for checked radiobutton */ 
 
input[type="radio"]:checked { 
 
    background-color: #93e026; 
 
} 
 

 
/* optional styles, I'm using this for centering radiobuttons */ 
 
.flex { 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="flex"> 
 
    <input type="radio" name="radio" id="radio1" /> 
 
    <label for="radio1">RadioButton1</label> 
 
</div> 
 
<div class="flex"> 
 
    <input type="radio" name="radio" id="radio2" /> 
 
    <label for="radio2">RadioButton2</label> 
 
</div> 
 
<div class="flex"> 
 
    <input type="radio" name="radio" id="radio3" /> 
 
    <label for="radio3">RadioButton3</label> 
 
</div>

Via nascondersi RadioButton e impostando l'aspetto RadioButton personalizzato per label s' pseudoselector. Tra l'altro non c'è bisogno di posizionamento assoluto qui. Demo:

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input[type="radio"] + label:before { 
 
    content: ""; 
 
    /* create custom radiobutton appearance */ 
 
    display: inline-block; 
 
    width: 25px; 
 
    height: 25px; 
 
    padding: 6px; 
 
    margin-right: 3px; 
 
    /* background-color only for content */ 
 
    background-clip: content-box; 
 
    border: 2px solid #bbb; 
 
    background-color: #e7e6e7; 
 
    border-radius: 50%; 
 
} 
 

 
/* appearance for checked radiobutton */ 
 
input[type="radio"]:checked + label:before { 
 
    background-color: #93e026; 
 
} 
 

 
/* optional styles, I'm using this for centering radiobuttons */ 
 
label { 
 
    display: flex; 
 
    align-items: center; 
 
}

<input type="radio" name="radio" id="radio1" /> 
 
<label for="radio1">RadioButton1</label> 
 
<input type="radio" name="radio" id="radio2" /> 
 
<label for="radio2">RadioButton2</label> 
 
<input type="radio" name="radio" id="radio3" /> 
 
<label for="radio3">RadioButton3</label>

fonte

2017-07-26 13:09:50

Come pulsante di personalizzare in html

risposta

Problemi correlati