html - カスタム ラジオ ボタンが表示されない

Question

ラジオボタンを次のようにカスタマイズしたいと思います。

これを実現するために、次の 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にかなり慣れていません。

Answer 1

そのはず

.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/

Answer 2

チェックボックスなしの実際の例を次に示します。多分それは役立つ

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;
}