代码之家 › 专栏 › 技术社区 › Allan Jebaraj

复选框和同级选择器

bootstrap-4 twitter-bootstrap css html

Allan Jebaraj · 技术社区 · 8 年前

我使用标签作为复选框的掩码,当选中相应的复选框时,我需要更改标签的背景。我到目前为止所做的是:

.viewbutton {
  height: 48px;
  width: 48px;
  background-color: #FFFFFF;
  border-radius: 50%;
  margin: 0px 4px;
  border: 0px;
  border: 1px solid #CDCDCD;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  position: relative;
  display: inline-block;
}

#comparechk:checked+#comparebtn,
#editchk:checked+#editbtn,
#multiplechk:checked+#multiplebtn {
  background-color: #005EFF;
  outline: none;
}

<input type="checkbox" id="comparechk" class="chkhidden">
<input type="checkbox" id="editchk" class="chkhidden">
<input type="checkbox" id="multiplechk" class="chkhidden">

<label for="comparechk" id="comparebtn" class="viewbutton"></label>
<label for="editchk" id="editbtn" class="viewbutton"></label>
<label for="multiplechk" id="multiplebtn" class="viewbutton"></label>

1 回复 | 直到 8 年前

C3roe 8 年前

+ 是 相邻的 兄弟组合,所以 A + B 意味着 B 元素 直接地 跟随 A ,中间没有其他元素。

你想要 一般的 兄弟组合者, ~

    #comparechk:checked ~ #comparebtn,
    #editchk:checked ~ #editbtn,
    #multiplechk:checked ~ #multiplebtn {
        background-color: #005EFF;
        outline: none;
    }

http://jsfiddle.net/8u031bom/3/

推荐文章

xajetin · 导航不更改滚动上的颜色

4 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前