Question

我正在尝试使用这种方法设置单选按钮的样式。在这里你可以找到我想要完成的一个演示：

CSS：

/*works*/
input[type="radio"] {
    display:none; /*doesn`t work here*/
    visibility:hidden;
}

/*doesn't work*/
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png) 0px top no-repeat;
    cursor:pointer;
}

/*doesn't work*/
input[type="radio"]:checked {
    background:url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png) 0px bottom no-repeat;
}

问题是，

input[type="radio"]:checked

对我不起作用。单击按钮时没有任何反应。虽然伪类:hover和:active工作正常。

我有这个HTML代码：

<td class="AFContentCell" valign="top" nowrap="">
  <div id="pt1:r1:0:sor2::content" class="af_selectOneRadio_content" name="pt1:r1:0:sor2">
   <fieldset style="border:none; margin:0px; padding:0px;">
      <legend class="p_OraHiddenLabel">Please choose something:</legend>
      <div>
        <span class="af_selectOneRadio_content-input">
           <input id="rad1" class="af_selectOneRadio_native-input" type="radio" value="0" name="pt1:r1:0:sor2">
        </span>
        <label class="af_selectOneRadio_item-text" for="rad1">Yes</label>
      </div>
      <div>
        <span class="af_selectOneRadio_content-input">
           <input id="rad2" class="af_selectOneRadio_native-input" type="radio" value="1" name="pt1:r1:0:sor2">
        </span>
        <label class="af_selectOneRadio_item-text" for="rad2">No</label>
      </div>
    </fieldset>
  </div>
</td>

此HTML由ADF生成，我无法添加或更改内容。据我了解，问题在于input元素位于span元素中，label位于span元素之外。有人可以帮我解决这个问题吗？

重要提示：我无法更改HTML文件。我需要弄清楚，如何使用CSS来实现这一点。没有JavaScript或jQuery。

更新

回答Zack：我正在使用type =“radio”和type =“checkbox”。感谢您注意我的错误印刷。 这仍然无法解决我的问题。

回答Diodeus：什么？你可以找到一堆教程解释如何做到这一点。以下是分步视频教程：https://www.youtube.com/watch?v=FQl_bcF4jOk

这是跨浏览器兼容的。

回答bigal：非常感谢您的详细解答。现在一切都适合我，我理解我做错了什么。

Answer 1

首先问题是你的跨度和单选按钮上有按钮的图像，而单选按钮（你希望用户点击它的东西）是隐藏的。

删除范围标记上的背景图像，但将背景图像保留在单选按钮上并再次显示单选按钮。

然后禁用wekbit / moz外观（因此默认单选按钮消失）并将按钮的宽度和高度增加到21px（因为19px太小）。

我拥有的最终CSS：

      input[type="radio"] {
        display:inline-block;
        width:21px;
        height:21px;
        margin:-1px 4px 0 0;
        vertical-align:middle;                                                                                        background:url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png) 0px top no-repeat;
        cursor:pointer;
        appearance:none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
        }

        input[type="radio"]:checked { 
background:url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png) 0px bottom no-repeat;
        }

        .af_selectOneRadio_item-text {
        color: Green;
        }

以下是我所说的关于http://jsfiddle.net/sbef2so3/16/

的链接

CSS问题，：检查状态不起作用

1 个答案: