Question

所以我在这里阅读了CSS - How to Style a Selected Radio Buttons Label?以及this Q/A over on UX

我尝试实现这两个概念，我似乎无法弄清楚如何做到这一点，因为父选择器似乎不存在。我相信你们其中一个人可以帮助我。

这里特别是我正在使用的代码，但通用示例很好：

<label for="ship-sfc-CNQM" class="checkboxLabel back">
    <div class="shippingcontainer">
        <input type="radio" name="shipping" value="sfc_CNQM" checked="checked" id="ship-sfc-CNQM">
        <div class="back sfc_logos" id="CNQM" title="China Post"></div><div class="back sfcdaterange"><span class="sfcdateprefixlong">Estimated delivery between </span><span class="sfcdateprefixmed">Est. between </span><span class="sfcday">Wednesday </span><span class="sfclongmonth">November </span><span class="sfcshortmonth">Nov </span><span class="sfcdate">11</span><span class="sfcordinal">th</span><span class="sfclongseparator"> and </span><span class="sfcshortseparator"> - </span><span class="sfcday">Tuesday </span><span class="sfclongmonth">December </span><span class="sfcshortmonth">Dec </span><span class="sfcdate">1</span><span class="sfcordinal">st</span></div>
        <div class="important forward">$0.00</div>
    </div>
</label>

如果选中子单选按钮，我如何设置.checkboxLabel的样式？

Answer 1

如果稍微重构HTML，可以使用纯HTML和CSS执行此操作。像这样的片段：

<强> HTML

<label for="ship-sfc-CNQM" class="radio">
  <input type="radio" name="shipping" value="sfc_CNQM" id="ship-sfc-CNQM" />
  <div class="radioStyle"></div>
  <span>Here is the text</span>
</label>

<强> CSS

.radio input { display: none; }

.radio .radioStyle  { 
  display: inline-block;
  width:20px; height:20px;
  background: grey; }

.radio input:checked + .radioStyle { background: green; }

.radio span { display: inline-block; }

此处，您正在使用:checked CSS选择器将规则应用于以下标签字段。

工作小提琴：https://jsfiddle.net/w7tem94t/

如何设置所选单选按钮的样式并将空格包含为可点击？

1 个答案: