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

这是没有复选框的工作示例。也许有帮助

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