Пользовательские кнопки радио не видны

Я хочу, чтобы настроить мои радиокнопки так они будут выглядеть следующим образом:Пользовательские кнопки радио не видны

enter image description here

Для достижения этой цели я использую следующий CSS и HTML

HTML:

<div class="buttonSlider"> 
    <input type="radio" value=".."></input> 
    <input type="radio" value=".."></input> 
    <input type="radio" value=".."></input> 
</div>

CSS:

.buttonSlider { 
    font-size: 250%; 
    background: #ccffdd; 
} 

.buttonSlider input[type="radio"] { /* don't show the radio check items */ 
    display: none; 
} 

.buttonSlider label { 
    display:inline-block; 
    background-color:#ddd; 
    padding:4px 11px; 
    font-family:Arial; 
    font-size:16px; 
} 

.buttonSlider input[type="radio"]:checked + .buttonSlider label { 
    background-color:#bbb; 
}

Тем не менее, кнопки не отображаются, когда я применяю этот css к переключателям.

Может ли кто-нибудь помочь и уточнить его/ее объяснение для меня? Я довольно новичок в css.

источник

2013-06-11 Bram

Параметр 'дисплей: нет;' почему они не отображаются. – Albzi

С вашим примером ничего не видно, потому что ничего не показывать. Добавьте ярлыки к примеру. –

Я не вижу никаких ярлыков в вашей разметке? – Kyle

Вот рабочий пример без флажков. может быть, это помогает

http://jsfiddle.net/zCBBf/1/

.radio-box 
{ 
background-color:black; 
height:53px; 
width:535px; 
padding:4px; 
} 

.radio-box label {  
    display:inline-block; 
    background-color:#ddd; 
    padding:17px 60px; 
    font-family:Arial; 
    font-size:16px; 
} 
input[type="radio"] { 
    display:none; 
} 

.radio-box input[type="radio"]:checked + label{ 
    background-color:red; 
}

источник

2013-06-11 11:10:45 spring

Это должно быть

.buttonSlider input[type="radio"]:checked + label { 
    background-color:#bbb; 
}

И вы делаете display:none;

.buttonSlider input[type="radio"] { /* don't show the radio check items */ 
    display: none; 
}

так что вам нужно удалить, что хорошо.

Пожалуйста, смотрите это:

http://jsfiddle.net/JSWorld/zCBBf/

источник

2013-06-11 10:08:50

Попробуйте это:

<head > 
    <title></title> 

    <style> 
     .buttonSlider 
     { 
     background-color: #800001; 
     } 
     .buttonSlider .radiobox 
     { 
      height: 20px; 
      width: 100px; 
      border: 1px solid black; 
      background-color: #800001; 
      float: left; 
     } 
     .buttonSlider input 
     { 
      display: none; 
     } 
    </style> 


    <script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('.buttonSlider input').replaceWith('<div class="radiobox"> <input type="radio" name="radio1" value=".."/></div>'); 
      $('.buttonSlider input').prop('checked', false); 
      $('.radiobox').click(function() { 
       var this_div = $(this); 
       if (this_div.find('input').is(':checked')) { 
        this_div.find('input').prop('checked', false); 
        this_div.css({ 'background-color': '#800001' }); 
       } 
       else { 
        this_div.find('input').prop('checked', true); 
        this_div.css({ 'background-color': '#808080' }); 
       } 

      }) 
     }) 
    </script> 
</head> 
<body> 
    <div class="buttonSlider"> 
     <input type="radio" value=".." name="radio1" /> 
     <input type="radio" value=".." name="radio1" /> 
     <input type="radio" value=".." name="radio1" /> 
    </div> 
</body> 
</html>

источник

2013-06-11 10:24:09 falguni

Пользовательские кнопки радио не видны

ответ

Смежные вопросы