如何将复选框变成按钮

Question

我试图只用css来实现这个功能，并使其可点击活动的答案并没有那么有用，css的特殊性部分会是什么？

#ck-button {
  margin-bottom: 1rem;
}

#ck-button label {
  width: 85%;
  border: 2px solid #eaf2fd;
  padding: 15px;
  border-radius: 3px;
  display: flex;
}

#ck-button label span {
  padding: 3px 0px;
}
#ck-button .title {
  color: #304256;
  font-weight: 600;
  font-size: 1em;
}
#ck-button .description {
  color: #6984a3;
  font-weight: 400;
  margin-left: 7px;
  font-size: 15px;
}
#ck-button label input {
  position: absolute;
  top: -20px;
}

<div id="ck-button">
    <label id="label">
        <input id="checkbox" type="checkbox" value="1" />
        <span className="title">Respirators</span>
        <span className="description">
            Surgical N95 or equivalent
        </span>
    </label>
</div>

这是js fiddle上的链接，可以好好看一下。https:/jsfiddle.netoLa4162h。

Answer 1

你可以像这样使用 + CSS 相邻兄弟姐妹组合器 结合 :checked CSS选择器，用于 checkbox需要注意的是，我对HTML和css做了一个小改动，我在旁边加了一个容器的div <input> 并对其应用了CSS。

#ck-button {
  margin-bottom: 1rem;
}

#ck-button .container {
  width: 85%;
  border: 2px solid #eaf2fd;
  padding: 15px;
  border-radius: 3px;
  display: flex;
}

#ck-button label span {
  padding: 3px 0px;
}
#ck-button .title {
  color: #304256;
  font-weight: 600;
  font-size: 1em;
}
#ck-button .description {
  color: #6984a3;
  font-weight: 400;
  margin-left: 7px;
  font-size: 15px;
}
#ck-button label input {
  position: absolute;
  top: -20px;
}

#checkbox:checked + .container {
  border: 2px solid #2F81ED;
  color: #2F81ED;
  background-color: #F5F8FD;
}

<div id="ck-button">
  <label id="label">
    <input id="checkbox" type="checkbox" value="1" />
    <div class="container">
      <span className="title">Respirators </span>
      <span className="description">
        Surgical N95 or equivalent
      </span>
    </div>
  </label>
</div>