Question

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

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>

Answer 1

您可以按照以下步骤操作来解决您的问题：

在标签中添加Rcon <- dbConnect(drv, "jdbc:hive2://slave:21050/;auth=noSasl",timeout=15,lifetime=3600)属性，并在for类型中设置id属性，这将绑定两个元素，您可以获得所需的结果。

input

在这里，我已将<input id="my_checkbox" type="checkbox" name="test" /> <label for="my_checkbox"> Text goes here </label> </input>放入复选框输入并添加到id="my_checkbox"属性中。

Answer 2

input[type=checkbox] {
    width: auto;
    height: 20px;
    cursor: pointer;    
    position: absolute;
    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>

自定义复选框按钮问题

2 个答案: