Question

我知道我们可以使用const authenticate = (cred, ad) => { console.log(this); // Window } class Model { constructor(mod) { const ad = {name: 'add'}; this.model = mod; this.authenticate = authenticate.bind(this, ad); } find(){ this.authenticate(); } } const model = new Model({name: 'model'}); const model1 = new Model({name: 'model1'}); model.authenticate({username: 'foo'}); // Window model1.authenticate({username: 'baz'}); // Window model1.find(); // Window属性，并使用<label for="#checkbox_id">并引用输入的for来创建自定义复选框。

我需要知道哪种方法是隐藏背景复选框标签的最佳方法，即id

我目前正在使用<input type="checkbox" class="masked-input" id="checkbox_id"/>。到目前为止，对我来说还没有问题。

但是我已经在许多网页中看到它们不使用.masked-input{display: none;}属性。

相反，他们使用

display:none

为什么他们不只使用.checkbox{ height: 0; width: 0; border: 0; overflow: hidden; visibility: hidden; }并保持简单？还是我错过了一些东西或做错了方向？

Answer 1

用户可访问性问题：

这是一个非常简单的问题。您应该使用

.checkbox{
  height: 0;
  width: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
}

或

.checkbox{
   opacity: 0; 
}

因为您使用display: none;，所以用户将很难访问。例如，如果用户试图通过按Tab键访问该复选框，则显示焦点为无的复选框将从焦点中跳过。

在下面的示例中，第二个复选框属性设置为display: none;，其他两个复选框设置为opacity: 0;，您可以通过按Tab键查看焦点，以及如何跳过第二个复选框。

.styled-checkbox {
  position: absolute;
  opacity: 0;
}

#styled-checkbox-2{
  display: none;
}

.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
.styled-checkbox + label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: white;
}
.styled-checkbox:hover + label:before {
  background: #f35429;
}
.styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
  background: #f35429;
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.styled-checkbox:checked + label:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

html {
  background: lightgray;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

.unstyled {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  margin: 20px 0;
}

.centered {
  width: 300px;
  margin: auto;
}

.title {
  text-align: center;
  color: #4571ec;
}

<h1 class="title">Pure CSS Custom Checkboxes</h1>

<ul class="unstyled centered">
  <li>
    <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
    <label for="styled-checkbox-1">Checkbox</label>
  </li>
  <li>
    <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2">
    <label for="styled-checkbox-2">CSS Only</label>
  </li>
  <li>
    <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value4">
    <label for="styled-checkbox-3">Fourth option</label>
  </li>
</ul>

Answer 2

当使用自定义样式的复选框时，通常会使用您使用的代码。它们隐藏了原始复选框，并显示了一个自定义复选框。为了仍然保留功能，它们仅隐藏复选框。

如果您使用display: none，则会从DOM中删除完整的复选框，从而无法单击。

如https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes所述：

请注意，我们用z-index隐藏输入：-1;和不透明度：0; -- 使用显示：无；或可见性：隐藏；会停止输入正常运作。在.control__indicator上-这就是我们样式看起来像复选框/单选按钮。

复选框的遮罩标签-正确的方法？

2 个答案: