创建CSS外观，使按钮的作用类似于复选框

Question

我正在尝试由图形艺术家创建设计，并且我已经成功创建了一个类似于复选框的按钮，但是我似乎无法找出CSS来模仿该设计。它为灰色，但在悬停/单击（选中）时会更改颜色。我正在使用bootstrap和fontawesome尝试实现这一目标。

IMG功能正在尝试复制：

https://jsfiddle.net/nojil/Lskdcu6r/31/

#canvasBranch-ck-button {
  margin: 4px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
  width: 150px;
}

#canvasBranch-ck-button:hover {
  background: #fff;
  color: #ff4c00;
  border-color: #ff4c00;
  cursor: pointer;
}

#canvasBranch-ck-button label {
  float: left;
  width: 100%;
}

#canvasBranch-ck-button label span {
  text-align: center;
  padding: 3px 0px;
  display: block;
}

#canvasBranch-ck-button label span.iconSpan {
  background-color: #D0D0D0;
  color: #fff;
}

#canvasBranch-ck-button label input {
  position: absolute;
  top: -20px;
}

#canvasBranch-ck-button input:checked+span.textSpan {
  color: #ff4c00 !important;
}

#canvasBranch-ck-button input:checked+span.iconSpan {
  background-color: #ff4c00;
}

<div id="canvasBranch-ck-button">
  <label class="d-flex mb-0">
        <input type="checkbox" value="canvasBranch">
        <span class="flex-fill align-items-center iconSpan"><i class="fas fa-angle-left"></i></span>
        <span class="align-items-center flex-fill textSpan">Canvas Branch</span>
      </label>
</div>

Answer 1

鉴于您已经尝试过，我想我可以在这里丢下一根骨头，让您对如何实现这一想法有所了解。

我在评论中已经解释过，您遇到的问题是，您正在尝试根据<（已选中/未选中）状态（<已选中/未选中）设置父（<div>）的样式。 em> child ，无法在CSS中完成。

鉴于使用::before，您还可以实现特定于图标的样式。您会注意到我是如何使用.money和.question类实现它们的，唯一需要的声明就是content: 'x'。您也可以do this with Font-Awesome。

请改用类似的方法。当然，您需要更新字体等等。

body {
  font-family: arial;
  background-color: #f6f6f6;
}

.hidden {
  display: none;
}

label {
  display: block;
  border: 1px solid transparent;
  display: flex;
  max-width: 170px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #eee;
  align-items: center;
  cursor: pointer;
  margin: 5px;
}

label::before {
  width: 35px;
  padding: 10px 0;
  display: block;
  background-color: #ccc;
  color: white;
  font-size: 18px;
  content: '!';
  text-align: center;
}

label.money::before {
  content: '$';
}

label.question::before {
  content: '?';
}

label>.text {
  display: block;
  flex-grow: 1;
  text-align: center;
  height: 100%;
  padding-top: 2px;
  font-size: 13px;
  color: #333;
}

label:hover,
input:checked+label {
  border: 1px solid #ff4c00;
}

label:hover>.text,
input:checked+label>.text {
  color: #ff4c00;
}

input:checked+label {
  background-color: white;
}

input:checked+label::before {
  background-color: #ff4c00;
}

<input class="hidden" id="chk1" type="checkbox">
<label class="" for="chk1">
  <span class="text">GENERIC</span>
</label>

<input class="hidden" id="chk2" type="checkbox">
<label class="money" for="chk2">
  <span class="text">MONEY</span>
</label>

<input class="hidden" id="chk3" type="checkbox">
<label class="question" for="chk3">
  <span class="text">QUESTION</span>
</label>

Answer 2

就像@TylerRopper在评论中提到的您不能根据孩子的样式来设置父项，但是您始终可以伪造它，这里是：

<div id="canvasBranch-ck-button">
      <label class="d-flex mb-0">

        <input type="checkbox" value="canvasBranch">
        <span class="flex-fill align-items-center iconSpan"><i class="fas fa-angle-left"></i></span>
        <span class="align-items-center flex-fill textSpan">Canvas Branch</span>
         <div class="fakeborder">
         </div>
      </label>

Css

#canvasBranch-ck-button {
    margin: 4px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #D0D0D0;
    overflow: auto;
    float: left;
    width: 150px;
}

#fakeborder{
  width:150px;
}

#canvasBranch-ck-button:hover {
    background: #fff;
    color: #ff4c00;
    border-color: #ff4c00;
    cursor: pointer;
}

#canvasBranch-ck-button label {
    float: left;
    width: 100%;
}

#canvasBranch-ck-button label span {
    text-align: center;
    padding: 3px 0px;
    display: block;
}

#canvasBranch-ck-button label span.iconSpan {
    background-color: #D0D0D0;
    color: #fff;
}

#canvasBranch-ck-button label input {
    position: absolute;
    top: -20px;
}

#canvasBranch-ck-button input:checked ~ span.textSpan {
    color: #ff4c00 !important;
}

#canvasBranch-ck-button input:checked ~ span.iconSpan {
    background-color: #ff4c00;
}

#canvasBranch-ck-button input:checked ~ .fakeborder {
    border: 2px solid #ff4c00;
    width:151px;
    height: 32px;
    margin:-1px;
    border-radius: 4px;
    position:absolute;
}

这是fiddle

Answer 3

您可以以此为起点并根据自己的喜好进行定制。

cb1.addEventListener('click', function() {
  console.log(cb1.checked)
})

.cb-btn {
  display: none;
}

.cb-btn + label {
  border: 1px solid #999;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px 0.5em 5px 2.5em;
  position: relative;
}

.cb-btn:not(:checked + label):hover {
  border-color: #a00;
  color: #a00;
  transition: all .2s ease-in-out;
}

.cb-btn + label::before {
  background-color: #999;
  border-radius: 5px 0 0 5px;
  bottom: 0;
  content: "$ ";
  display: block;
  left: 0;
  line-height: 1.9em;
  position: absolute;
  text-align: center;
  top: 0;
  transition: all .2s ease-in-out;
  width: 2em;
}

.cb-btn:not(:checked) + label:hover::before {
  background-color: #a00;
  color: #fff;
}

.cb-btn:checked + label {
  border: 1px solid green;
  border-radius: 5px;
  color: green;
  cursor: pointer;
  padding: 5px 0.5em 5px 2.5em;
  position: relative;
}

.cb-btn:checked + label::before {
  background-color: green;
  color: #fff;
}

<input type="checkbox" value="canvasBranch" id="cb1" class="cb-btn">
<label class="d-flex mb-0" for="cb1">Label Text</label>