ابدأ بالتواصل مع الأشخاص وتبادل معارفك المهنية

أنشئ حسابًا أو سجّل الدخول للانضمام إلى مجتمعك المهني.

متابعة

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
تم إضافة السؤال من قبل احمد برهام , Ruby on Rails Developer , Hungerstation
تاريخ النشر: 2013/09/03
Saeed Alahmari
من قبل 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!!

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/

المزيد من الأسئلة المماثلة

هل تحتاج لمساعدة في كتابة سيرة ذاتية تحتوي على الكلمات الدلالية التي يبحث عنها أصحاب العمل؟