Question

我正在创建一个自定义复选框，因此我可以拥有自己的UI设计，并且仍然在页面中有input[type="checkbox"]，以便用它切换css类并且能够提交表单并且正在进行进入表格。

我知道如果输入有display: none;，它将不会传递到表单中，所以我会隐藏它，因为我实际上并没有使用它。

问题：隐藏它时应该考虑什么？

我正考虑给它position: absolute;然后给出一个负余量，这样它就不会出现了。使用label标记，我仍然可以触发它。但我应该使用不透明度或可见度吗？

Answer 1

如您所见，使用opacity:0;，用户仍然可以点击它。点击下面代码段上的实际标签附近：

.chk { opacity:0; }
.chk + label {
    background-color:red;
    height: 22px;
    width: 22px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}
.chk:checked + label { background-color:blue; }

<input type='checkbox' id='mychk' class='chk' /><label for='mychk' ></label>

现在，使用否定margin也会使标签消失：

.chk { margin:-100px; }
.chk + label {
    background-color:red;
    height: 22px;
    width: 22px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}
.chk:checked + label { background-color:blue; }

<input type='checkbox' id='mychk' class='chk' /><label for='mychk' ></label>

最后：visibility:hidden可以解决问题：

.chk { visibility:hidden; }
.chk + label {
    background-color:red;
    height: 22px;
    width: 22px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}
.chk:checked + label { background-color:blue; }

<input type='checkbox' id='mychk' class='chk' /><label for='mychk' ></label>

结论：

使用visibility:hidden隐藏<input>。这会使页面中的内嵌显示仍然隐藏，而不会影响label使用它。

Answer 2

使用此代码

＆＃13;

input[type="checkbox"] {
  height: 16px;      
  opacity: 0;
  position: absolute;
  width: 16px;      
}
 input[type="checkbox"] + label::before {
  border: 1px solid #ccc;
  border-radius: 4px;
  content: "";
  height: 16px;
  left: 8px;
  position: absolute;
  top: 10px;
  width: 16px;
}
 input[type="checkbox"]:checked + label:before {
  border: 1px solid #434452;  
  background:#434452;
}
label {
  color: #434452;
  font-size: 18px;
  font-weight: normal;
  line-height: 100%;
  padding-left: 22px;
  cursor:pointer
}

＆＃13;

<input type='checkbox' id='chk' class='chk' /><label for='chk' >check</label>

＆＃13;

隐藏输入的自定义复选框

2 个答案:

结论：