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花式复选框问题

回答

相关问题