pure-CSS花式複選框問題

我想要一個純CSS花式複選框。而且我成功實現了90％的目標，唯一例外的是我看到惱人的標準chechbox出現在我的花哨複選框下。我無法擺脫它。任何幫助？pure-CSS花式複選框問題

.checkboxFive { 
 
    width: 12px; 
 
    margin: 12px 100px; 
 
    position: relative; 
 
} 
 

 
.checkboxFive label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    top: 0; 
 
    left: 0; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.checkboxFive label:after { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 4px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 3px; 
 
    border: 2px solid #333; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.checkboxFive label:hover::after { 
 
    opacity: 0.5; 
 
} 
 

 
.checkboxFive input[type=checkbox]:checked + label:after { 
 
    opacity: 1; 
 
}

<div class="checkboxFive"> 
 
    <input type="checkbox" value="1" id="checkboxFiveInput" name="" /> 
 
    <label for="checkboxFiveInput"></label> 
 
</div>

來源

2017-03-06 Edgar Navasardyan

你可以從屏幕上刪除它position和coordonates。

（display或visibility可能成爲一個無障礙的問題）

.checkboxFive { 
 
    width: 12px; 
 
    margin: 12px 100px; 
 
    position: relative; 
 
} 
 

 
.checkboxFive label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    top: 0; 
 
    left: 0; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.checkboxFive label:after { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 4px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 3px; 
 
    border: 2px solid #333; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.checkboxFive label:hover::after { 
 
    opacity: 0.5; 
 
} 
 
#checkboxFiveInput { 
 
position:absolute; 
 
left:-9999px; 
 
} 
 
.checkboxFive input[type=checkbox]:checked + label:after { 
 
    opacity: 1; 
 
}

<div class="checkboxFive"> 
 
    <input type="checkbox" value="1" id="checkboxFiveInput" name="" /> 
 
    <label for="checkboxFiveInput"></label> 
 
</div>

來源

2017-03-06 21:14:41

添加display:none到checkboxFiveInput。

.checkboxFive { 
 
    width: 12px; 
 
    margin: 12px 100px; 
 
    position: relative; 
 
} 
 

 
.checkboxFive input { 
 
    display:none; 
 
} 
 

 
.checkboxFive label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    top: 0; 
 
    left: 0; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.checkboxFive label:after { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 4px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 3px; 
 
    border: 2px solid #333; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.checkboxFive label:hover::after { 
 
    opacity: 0.5; 
 
} 
 

 
.checkboxFive input[type=checkbox]:checked + label:after { 
 
    opacity: 1; 
 
}

<div class="checkboxFive"> 
 
    <input type="checkbox" value="1" id="checkboxFiveInput" name="" /> 
 
    <label for="checkboxFiveInput"></label> 
 
</div>

來源

2017-03-06 21:07:29 Namoz

神奇。 @Namoz，還有一個問題（無題）。你如何改變勾號的顏色？ –

On .checkboxFive標籤：更改以下行後：border：3px純藍色; 藍色是tick的顏色，可以使用hexa值。 – Namoz

在創建自定義的複選框的第一步是添加visibility: hidden您input元素。在你的情況，你的CSS是這樣的：

.checkboxFive #checkboxFiveInput { 
    visibility: hidden; 
}

你可以看到這個link有關建立自定義複選框的更多信息。

來源

2017-03-06 21:11:59 jtmingus

pure-CSS花式複選框問題

回答

相關問題