时间戳

首页 > 解决方案 > 自定义复选框按钮问题

css - 自定义复选框按钮问题

问题描述

我正在尝试制作一个自定义复选框按钮，单击该按钮将更改其颜色作为它们处于活动状态的指示器。我站起来几乎完成了，但复选框出现在框的左侧，而不是按钮本身。我不知道该怎么做。

input[type=checkbox] {
    width: auto;
    height: 20px;
    cursor: pointer;    
    position: relative;
    opacity: 0;
    z-index: 9999;
}

input[type=checkbox] + label {
    font-family: "Aharoni";
    display: inline-block;
    background: #dcdcdc;
    color: black;
    font-size: 12px;  
    font-weight: 400;
    text-align: center;
    border: solid 1px #a8a8a8;
    border-bottom-color: black;
    border-radius: 0px;
    width: auto;
    height: 20px;
    padding-left:5px;
    padding-right:5px;
    cursor: pointer;    
    position: relative;
}

input[type=checkbox]:checked + label,
input[type=checkbox]:active + label {
    background:gray;    
    color:white;
}
<input type="checkbox" name="test" /><label>Text goes here</label></input>

标签： csscheckbox

解决方案

你可以这样做，它会解决你的问题：

for在标签中添加一个属性并id在类型中设置一个属性，input这将绑定两个元素，您可以获得所需的结果。

<input id="my_checkbox" type="checkbox" name="test" />
    <label for="my_checkbox">
         Text goes here
    </label>
</input>

在这里，我id="my_checkbox"在复选框输入中添加了一个并添加到for="my_checkbox"attr.xml 中。

推荐阅读