Question

我尝试在单选按钮的标签处于：已选中状态时将背景颜色应用于单选按钮的标签。

编辑：这基本上是我想要实现的目标，但有多种选择： https://mdn.mozillademos.org/files/3706/expandable-elements.html

下面我有完整的标记。我似乎无法正常工作的是：

label

  &:hover
    text-decoration: underline
    cursor: pointer

  &:checked
    background: white
    color: blue

我尝试了一些不同的技巧，例如向#shop + label添加选择器，但这似乎也不起作用。

任何帮助或想法将不胜感激!!

干杯。

HTML

<!-- Menu -->
<ul class="nav-p">
<li><label for="shop">Shop</label></li>
<li><label for="support">Support</label></li>
<li><label for="mystuff">myStuff</label></li>
</ul>

<!-- Sub Menu -->
<input type="radio" id="shop" name="menu">
<ul class="nav-s">
<li>Shop - 1</li>
<li>Shop - 2</li>
<li>Shop - 3</li>
</ul>

<input type="radio" id="support" name="menu">
<ul class="nav-s">
<li>Support - 1</li>
<li>Support - 2</li>
<li>Support - 3</li>
</ul>

<input type="radio" id="mystuff" name="menu">
<ul class="nav-s">
<li>myStuff - 1</li>
<li>myStuff - 2</li>
<li>myStuff - 3</li>   
</ul>

萨斯

.nav-p
        +clearfix

        li
          list-style: none
          float: left
          display: block
          padding: 12px 15px 15px 15px
          margin-top: 3px
          +border-top-radius(3px)

          color: white
          font:
            size: 15px
            weight: 100

          label

            &:hover
              text-decoration: underline
              cursor: pointer
            &:checked
              background: white
              color: blue

#shop + .nav-s
  display: none

#shop
  display: none
  &:checked + .nav-s
    display: block

#support + .nav-s
  display: none

#support
  display: none
  &:checked + .nav-s
    display: block

#mystuff + .nav-s
  display: none

#mystuff
  display: none

  &:checked + label
    background: blue

  &:checked + .nav-s
    display: block


.nav-s
  background: white
  +border-bottom-radius(5px)
  padding: 5px 10px

  li
    list-style: none
    display: inline-block
    padding: 10px
    color: $linkColor

    &:hover
      cursor: pointer
      text-decoration: underline

Answer 1

:checked上没有label州，只有相应的input字段。

因此，您应该将输入字段移动到与标签相同的DOM级别。

<label for="myId"></label>
<input id= "myId" type="radio" />

然后在CSS部分你可以做到：

label + input:checked
    background-color: #f00;

如果由于某种原因您无法更改HTML结构，那么唯一的解决方案就是JavaScript。

使用~运算符

查看similar technique here

Sass - 如何选择无线电输入的标签？

1 个答案: