Communiquez avec les autres et partagez vos connaissances professionnelles

Inscrivez-vous ou connectez-vous pour rejoindre votre communauté professionnelle.

Suivre

What are custom radio buttons?

CSS: #foo:checked::before, input[type="checkbox"] { position:absolute; clip: rect(0,0,0,0); clip: rect(0000); } #foo:checked, input[type="checkbox"] + label::before { content: url('checkbox.png'); } input[type="checkbox"]:checked + label::before { content: url('checkbox-checked.png'); } #foo doesn't reference any particular element, it's there purely to prevent browsers from implementing the later selectors if it doesn't understand that (since most browsers will drop the entire selector if any part of it fails).

user-image
Question ajoutée par احمد برهام , Ruby on Rails Developer , Hungerstation
Date de publication: 2013/09/03
Saeed Alahmari
par Saeed Alahmari , مدير علاقات التواصل الاجتماعي , المراعي

YES you can custom Radio buttons, Example:

 

HTML:

 

<div>   <input type="radio" id="radio01" name="radio" />   <label for="radio01"><span></span>Radio Button1</label> </div>   <div>  <input type="radio" id="radio02" name="radio" />  <label for="radio02"><span></span>Radio Button2</label> </div>

 

 

CSS (style.css):

div {

  margin:000.75em0;

}

 

input[type="radio"] {

    display:none;

}

input[type="radio"] + label {

    color: #292321;

    font-family:Arial, sans-serif;

    font-size:14px;

}

input[type="radio"] + label span {

    display:inline-block;

    width:19px;

    height:19px;

    margin:-1px4px00;

    vertical-align:middle;

    cursor:pointer;

    -moz-border-radius:  50%;

    border-radius:  50%;

}

 

input[type="radio"] + label span {

     background-color:#292321;

}

 

input[type="radio"]:checked + label span{

     background-color:#CC3300;

}

 

input[type="radio"] + label span,

input[type="radio"]:checked + label span {

  -webkit-transition:background-color0.4s linear;

  -o-transition:background-color0.4s linear;

  -moz-transition:background-color0.4s linear;

  transition:background-color0.4s linear;

}

 

Note: It might not work on all browsers specially old ones 

Good Luck!!

Utilisateur supprimé
par Utilisateur supprimé

We cannot customize through CSS or html. You have to compulsory use some kind of javascript ot jquery. I am using this from last5 years. Simple and best plugin in market:http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

More Questions Like This

Avez-vous besoin d'aide pour créer un CV ayant les mots-clés recherchés par les employeurs?