Как стиль ввода типа = радио?

Question

Я хочу заменить кнопки выбора входного отношения по умолчанию с пользовательским фоном/изображениями. Также добавьте пользовательское изображение, когда выбран один из входов.

<div class="form-item"> 
    <label for="right-gender"> 
     Gender 
     <span class="form-required" title="This field is required.">*</span> 
    </label> 
    <div id="right-gender" class="form-radios"> 
     <div class="form-item form-type-radio"> 
      <input id="right-gender-1" class="form-radio" type="radio" value="male" name="submitted[right][gender]"> 
      <label class="option" for="right-gender-1">Male </label> 
     </div> 
     <div class="form-item form-type-radio"> 
      <input id="right-gender-2" class="form-radio" type="radio" value="female" name="submitted[right][gender]"> 
      <label class="option" for="right-gender-2">Female </label> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/L0f8ftdn/

Answer 1

Вам нужно сделать спрайт с двумя разными изображениями. Проверено одно и не отмечено.

Затем CSS

input.form-radio{ 
display:none; 
} 
input.form-radio+label{ 
position:relative; 
cursor:pointer; 
padding-left:20px; /* need to be greater then the image width */ 
} 
input.form-radio+label:after{ 
position:absolute; 
content:" "; 
top:0; 
left: 0px; 
width: 15px;/*adjust the width of the image */ 
height: 15px; /*adjust the height of the image */ 
background:url(../images/checkbox.png); 
background-repeat:no-repeat; 
background-position:bottom left; 

} 
input.form-radio:checked+label:after{ 
background:url(../images/checkbox.png); 
background-position:top left; 
} 

Это из моего недавнего проекта. Надеюсь, это поможет.

Answer 2

http://www.hongkiat.com/blog/css3-checkbox-radio/

Есть много обучающих программ для этого.

Скрыть кнопку реального радио:

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

Добавить в 'псевдо-метку', используя до того:

label:before { 
    content: ""; 
    display: inline-block; 

    width: 16px; 
    height: 16px; 

    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottombottom: 1px; 
    background-color: #aaa; 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px   rgba(255, 255, 255, .8); 
    } 

Вы также можете добавить фотографии в свой CSS.

Для изменения выбранного радио:

input[type=radio]:checked + label:before { 
     content: "\2022"; 
     color: #f3f3f3; 
     font-size: 30px; 
     text-align: center; 
     line-height: 18px; 
    } 

Answer 3

Действительно просто с jQuery. Берем скрипку из вашего вопроса: http://jsfiddle.net/L0f8ftdn/1/

$('.radiooption').on('click', function() { 
    $('.radiooption').removeClass('checked'); // Make all "unchecked" 
    $(this).addClass('checked'); // Make this one "checked" 
    $(this).prev('input').prop('checked', true); // Make the matching radio checked 
}); 

В вашем случае ваш .radiooption будет иметь фоновое изображение, а затем вы можете скрыть свои входы с помощью CSS.

О, и полезный момент для будущего: если вы хотите, чтобы люди помогали вам, не будьте ослом и не ленитесь.