Question

我试图重新设计我的html复选框，但是......可能会出现问题，但它并没有真正起作用。我的HTML代码是：

<div class="checkit">
    <label for="checkbox-1">
        <i class="icon-check"></i>
    </label>
    <input type="checkbox" id="checkbox-1" />
</div>

Css3代码是：

.checkit {
    display:block;
    background:#ffffff;
    border:1px solid #e8e8e8;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    width:18.9px;
    height:17.8px;
    cursor:pointer;
}

.checkit:hover {
    border:1px solid #c0c0c0;
}

.checkit:active {
    -webkit-box-shadow:inset 0px 0px 5px #7c7c7c;
    -moz-box-shadow:inset 0px 0px 5px #7c7c7c;
    box-shadow:inset 0px 0px 5px #7c7c7c;
}

.checkit i {
    color:#a3ec15;
    font-size:23px;
    position:absolute;
    text-shadow:0px 0px 5px #eaeaea;
    margin:-5px -8.9px;
    display:none;
}

.checkit input[type="checkbox"] {
    visibility:hidden;
    width:0px;
    height:0px;
}

.checkit label {
    cursor:inherit;
    display:block;
    width:100%;
    height:100%;
}

.checkit input[type="checkbox"]:checked + label i {
    display:block;
}

.checkit input[type="checkbox"]:not(:checked) + label i {
    display:none;
}

我想要做的是，当按下主框（checkit）时显示V符号（✔），当它没有时，然后隐藏（通过使用display css）（ps：icon-check类是我的v符号，使用该网站的字体图标。因为我不能在这里使用该字体 - 没有上传它的位置 - 我将使用默认的检查标记显示演示）

这里是演示的jsFiddle链接：

http://jsfiddle.net/FatboySlim/urg2mumv/

我也考虑使用javascript切换，但我希望它是纯css3

任何帮助都会非常受欢迎。

谢谢！

Answer 1

您必须将输入放在前面。在此处查看工作代码段。使用这种方式：

＆＃13;

.checkit {
  display:block;
  background:#ffffff;
  border:1px solid #e8e8e8;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  width:18.9px;
  height:17.8px;
  cursor:pointer;
}

.checkit:hover {
  border:1px solid #c0c0c0;
}

.checkit:active {
  -webkit-box-shadow:inset 0px 0px 5px #7c7c7c;
  -moz-box-shadow:inset 0px 0px 5px #7c7c7c;
  box-shadow:inset 0px 0px 5px #7c7c7c;
}

.checkit i {
  color:#a3ec15;
  font-size:23px;
  position:absolute;
  text-shadow:0px 0px 5px #eaeaea;
  margin:-5px -8.9px;
  display:none;
}

.checkit input[type="checkbox"] {
  /*visibility:hidden;
  width:0px;
  height:0px;*/
}

.checkit label {
  cursor:inherit;
  display:block;
  width:100%;
  height:100%;
}

.icon-check:after {
  content:"✔";
  font-family:Arial;
}

.checkit input[type="checkbox"]:checked + label i {
  display:block;
}

.checkit input[type="checkbox"]:not(:checked) + label i {
  display:none;
}

.checkit input[type="checkbox"] {display: none;}

＆＃13;

<div class="checkit">
  <input type="checkbox" id="checkbox-1" />
  <label for="checkbox-1">
    <i class="icon-check"></i>
  </label>
</div>

＆＃13;

使用CSS3将div切换为Checkbox

1 个答案: