Question

所以我尝试使用CSS和clip-path创建自定义复选框。我有创造和工作正常。现在问题是当我选中框时边框消失了。不知道为什么会这样。任何帮助都会很棒。此外，这是我目前正在处理的codepen的链接。 https://codepen.io/Brushel/pen/qPovdB?editors=0110

＆＃13;

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 2em;
}

.title {
  text-align: center;
  font-weight: 300;
}

label[for="checked"] {
  padding-right: 10px;
  padding-left: 10px;
}

#checked[type="checkbox"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #333;
  height: 25px;
  width: 25px;
  cursor: pointer;
}
#checked[type="checkbox"]:after {
  -webkit-clip-path: polygon(21% 40%, 21% 40%, 8% 54%, 25% 68%, 36% 77%, 47% 65%, 48% 64%, 64% 47%, 75% 35%, 93% 13%, 81% 4%, 36% 54%);
          clip-path: polygon(21% 40%, 21% 40%, 8% 54%, 25% 68%, 36% 77%, 47% 65%, 48% 64%, 64% 47%, 75% 35%, 93% 13%, 81% 4%, 36% 54%);
  background: #333;
  height: 25px;
  width: 25px;
}

#checked[type="checkbox"]:checked {
  -webkit-clip-path: polygon(21% 40%, 21% 40%, 8% 54%, 25% 68%, 36% 77%, 47% 65%, 48% 64%, 64% 47%, 75% 35%, 93% 13%, 81% 4%, 36% 54%);
          clip-path: polygon(21% 40%, 21% 40%, 8% 54%, 25% 68%, 36% 77%, 47% 65%, 48% 64%, 64% 47%, 75% 35%, 93% 13%, 81% 4%, 36% 54%);
  background: #333;
  height: 25px;
  width: 25px;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
}

label[for="customcheckbox"] {
  padding-right: 10px;
  padding-left: 10px;
}

#customcheckbox[disabled="disabled"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0.5px solid #b3b3b3;
  height: 25px;
  width: 25px;
  cursor: not-allowed;
}

#customcheckbox[disabled="disabled"] {
  background: #ccc;
}

#three[type="checkbox"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #333;
  height: 25px;
  width: 25px;
}

#three[type="checkbox"]:not(:checked) {
  background: white;
}

#three[type="checkbox"]:checked {
  -webkit-clip-path: polygon(21% 40%, 21% 40%, 8% 54%, 25% 68%, 36% 77%, 47% 65%, 48% 64%, 64% 47%, 75% 35%, 93% 13%, 81% 4%, 36% 54%);
          clip-path: polygon(21% 40%, 21% 40%, 8% 54%, 25% 68%, 36% 77%, 47% 65%, 48% 64%, 64% 47%, 75% 35%, 93% 13%, 81% 4%, 36% 54%);
  background: #333;
  height: 25px;
  width: 25px;
}
#three[type="checkbox"]:after {
  -webkit-clip-path: polygon(21% 40%, 21% 40%, 8% 54%, 25% 68%, 36% 77%, 47% 65%, 48% 64%, 64% 47%, 75% 35%, 93% 13%, 81% 4%, 36% 54%);
          clip-path: polygon(21% 40%, 21% 40%, 8% 54%, 25% 68%, 36% 77%, 47% 65%, 48% 64%, 64% 47%, 75% 35%, 93% 13%, 81% 4%, 36% 54%);
  background: #333;
  height: 25px;
  width: 25px;
}

＆＃13;

<body>
  <div class='container'>
    <h4 class='title'>Checkboxes Via Clip-Path</h4>
    <label for='checked' id='plus'>This</label>
    <input id='checked' type='checkbox'>
    <label for='checked' id='plus'>That</label>
    <input id='checked' type='checkbox'>
    <!-- / Start of the second checkbox -->
    <h4 class='title'>Disabled Checkbox</h4>
    <label for='customcheckbox' id='plus'>This</label>
    <input disabled='disabled' id='customcheckbox' type='checkbox'>
    <label for='customcheckbox' id='plus'>That</label>
    <input disabled='disabled' id='customcheckbox' type='checkbox'>
    <h4 class='title'>Checkbox via SVG</h4>
    <label for='three'>This</label>
    <input id='three' type='checkbox'>
    <label for='three'>That</label>
    <input id='three' type='checkbox'>
  </div>
</body>

＆＃13;

使用clip-mask创建自定义复选框

0 个答案: