創建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> ）的樣式。在CSS中。

假定使用::before ，您還可以實現特定於圖標的樣式。 您會注意到我是如何使用.money和.question類實現它們的，唯一需要的聲明就是content: 'x' 。 您也可以使用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;
}

這是小提琴

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>