0

实际上我用这个技巧来设计单选按钮：

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

4

1 回答 1

0

更新的答案

下面的原因仍然是正确的，但是仍然有一种更简单的方法可以通过使用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>
于 2013-01-17T19:32:29.340 回答