Question

实际上我正在使用这个技巧为单选按钮设置样式：

HTML：

<div class="radioButt" >
  <h1>Radio:</h1>
  <p>Val1 : <span></span><input type="radio" id="1" checked="checked" name="radio" ><span></span></p>
  <p>Val2 : <span></span><input type="radio" id="2" name="radio" ><span></span></p>
  <p>Val3 : <span></span><input type="radio" id="3" name="radio" ><span></span></p>
</div>

CSS：

.radioButt p {
    padding: 10px;
}

.radioButt span{
    position: relative;
    right: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    padding: 3px;
    color: #FFF;
    text-align: center;
    background: #c06f59;
}

.radioButt  span:after{
    content: "no"; /*if CSS are disbled span elements are not displayed*/
}

.radioButt input{
    position: relative;
    right: 0;
    margin: -26px;
    width: 31px;
    height: 31px;
    /*hide the radio button*/
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity: 0;
        cursor: pointer;
}

.radioButt  input[type="radio"] + span{ /*the span element that immediately follow the radio button */
    visibility: hidden; /*temporarily hide the "YES" label*/
    background: #6EB558;
}

.radioButt input[type="radio"] + span:after{
        width: 30px;
        display: inline-block;
    content: "yes"; /*if CSS are disbled span elements are not displayed*/
}


.radioButt input[type="radio"]:checked + span{
    visibility: visible; /*show the "YES" label only if the radio button is checked*/
}

可以在http://jsfiddle.net/rzt3c/2/

找到一个工作示例

我想为复选框输入创建相同的效果。我试图在css中添加“复选框”类型，但它似乎不起作用...实际上，当复选框被选中时，id不会返回未选中状态。（这里有代码：http://jsfiddle.net/rkCMa/1/）

Answer 1

更新的答案

下面的原因仍然是正确的，但是使用pointer-events样式仍然可以通过CSS（承受可用性限制仍然...）来实现它。将其添加到您的样式中：

.radioButt span{
  pointer-events: none;
}

这将允许点击跨度，因此后期跨度不会再阻止输入。这应该回答您的问题，但请记住您对原始问题的评论中提到的一些可用性问题。

它不起作用的原因是它显示“是”时跨度超过输入，因此它是实际被点击的跨度而不是输入。我会更改格式，以便两个跨度在之前输入，并使用它们上的类名来区分和设置它们而不是css选择器。类似的东西：

<div class="radioButt" >
  <h1>Checkbox:</h1>
  <p>Ck1 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck1" checked="checked" ></p>
  <p>Ck2 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck2" ></p>
  <p>Ck3 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck3" ></p>
</div>

CSS样式复选框

1 个答案:

更新的答案