CSS: Стилированные радиокнопки не отображаются как выбрано

У меня есть некоторые пользовательские переключатели, которые не отображаются как выбранные при нажатии. Фактические скрытые радиокнопки действительно выбираются, но по какой-то причине стиль цвета не будет отображаться при выборе новых. Может ли кто-нибудь дать понять, почему?CSS: Стилированные радиокнопки не отображаются как выбрано

JSFiddle: http://jsfiddle.net/dan5ermou5/f2aktvy4/1/

CSS:

/*          /
/CSS for A Place to Begin Section of Form/
/          */ 

    #apbContainer { 
     position   :relative; 
     height    :702px; 
     width    :233px; 
     top     :-320px; 
     left    :274px; 
     } 

/* CSS for Text Boxes and Labels */ 

    label { 
     display    :inline-block; 
     cursor    :pointer; 
     font-family   :sans-serif; 
     font-weight   :bold; 
     font-size   :10pt; 
     margin-bottom  :4px; 
     position   :relative; 
     } 


/* style radio button label */ 
    #radioapb label { 
     font-family   :sans-serif; 
     font-weight   :normal; 
     font-style   :italic; 
     font-size   :10pt; 
     } 

    /*     /
/CSS for Radio Buttons/
/     */ 

    /* remove old radio buttons */ 

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

    .radio label:before { 
     content: ""; 
     display: inline-block; 
     width: 14px; 
     height: 14px; 
     margin: 2px 0px 0px 0px; 
     position: absolute; 
     left: 115px; 
     bottom: 1px; 
     box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
     border-radius: 20px; 
     } 

    .radio label:before { 
     border-radius :8px; 
     } 

    .radio input[type=radio]:checked + label:before { 
     content  : "\2022"; 
     color  : green; 
     font-size : 14px; 
     text-align : center; 
     line-height : 22px; 
     }

HTML:

<body> 
<!-- Client Check-in Form --> 
<div id="apbContainer"> 
<form method="post" action="processcheck-in.php"> 
    <input type="hidden" name="formID" value="check-inform"/> 

<!-- A Place to Begin Radio Buttons --> 
<div class="radio"> 
<div id="radioapb"> 
     <label for="male">Male</label> 
      <input id="male" type="radio" name="GENDER" value="m"><br></br> 
     <label for="female">Female</label> 
      <input id="female" type="radio" name="GENDER" value="f"><br></br> 

     <label for="yhomeless">Yes</label> 
      <input id="yhomeless" type="radio" name="HOMELESS" value="y"><br></br>   
     <label for="nhomeless">No</label> 
      <input id="nhomeless" type="radio" name="HOMELESS" value="n"><br></br> 

     <label for="yveteran">Yes</label> 
      <input id="yveteran" type="radio" name="VETERAN" value="y"><br></br>   
     <label for="nveteran">No</label> 
      <input id="nveteran" type="radio" name="VETERAN" value="n"><br></br> 
</div> 
</div> 
<input type="submit" name="dailyForm" value="Submit"/> 
</form> 
</div> 
</body>

источник

2014-12-10 dan5ermou5

Ваш input помещается после вашего label, так input:checked + label:before не будет работать. В смежном селекторе (+) выбирается только родственный брат сразу после первый селектор. Поэтому разместите свой <input> s до вашего <label> s.

Я обновил свой jsFiddle: http://jsfiddle.net/f2aktvy4/3/

источник

2014-12-10 21:41:35 philtune

Awesome! Работает отлично :) – dan5ermou5

Ваша проблема в том, что оператор + работает на элементах, которые приходят непосредственно после предыдущего элемента. Если вы измените порядок своих <label> s и <input> s, он будет работать нормально.

Просьба обновить JSFiddle. =)

Кроме того, удобная вещь для закладки - this page. Важно узнать, для чего предназначены каждый из селекторов CSS. Аналогично используемому селектору ~, который выберет любой элемент, который появится после предыдущего элемента. Например, если у вас есть <br> s между <label> и <input>, он все равно будет работать.

источник

2014-12-10 21:42:52

Спасибо за ссылку! Это очень ценится :) – dan5ermou5

CSS: Стилированные радиокнопки не отображаются как выбрано

ответ

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