1

我正在尝试仅使用 css 而没有图像来创建一个自定义复选框，但我遇到了一些麻烦。

我在网上遵循了一些教程，但我似乎遇到了障碍，帮助会很大。

我的CSS看起来像这样

input[type='checkbox'] {
  -webkit-appearance: none;
  background: #dee1e2;
  width: 1.3em;
  height: 1.3em;
  border-radius: 3px;
  border: 1px solid #555;
  position: relative;
  bottom: .3em;
}

input[type='checkbox']:checked {
    -webkit-appearance: none;
    background: #dee1e2;
    width: 1.3em;
    height: 1.3em;
    border-radius: 5px;
    position: relative;
    bottom: .3em;
    -webkit-transform: rotate(45deg);
}

一直发生的事情是当我旋转整个盒子时，我尝试添加一个 :after ，但它似乎没有做任何事情。

4

2 回答 2

3

如果你想变得非常花哨，你可以使用 unicode 检查，甚至是图标字体......

input[type='checkbox'] {
  -webkit-appearance: none;
  background: #dee1e2;
  width: 1.3em;
  height: 1.3em;
  border-radius: 3px;
  border: 1px solid #555;
  position: relative;
  bottom: .3em;
}
/* added content with a unicode check */
input[type='checkbox']:checked:before {
  content: "\2713";
  left: 0.2em;
  position: relative;
}

演示

于 2013-08-02T17:11:19.567 回答
1

事实上，我在我的网站（http://e-home.mx）上尝试了同样的事情，但我最终用 css 隐藏了输入元素，并为每个元素添加了一个标签，这是“模仿”它的标签像这样的行为：

HTML

<input type="checkbox" id="c8" name="c8" />
<label for="c8"><span></span>Label here</label>

CSS：

input[type="checkbox"] + label{color:#000;font-family:Arial, sans-serif;}
input[type="checkbox"] + label span{
 display:inline-block;
 width:19px;
 height:19px;
 margin:-1px 4px 0 0;
 vertical-align:middle;
 background:url("http://e-home.mx/html5/img/form_elements_outlined.png") left top no-repeat;
 cursor:pointer;
}
input[type="checkbox"] {display:none}
input[type="checkbox"]:checked + label span {
 background:url("http://e-home.mx/html5/img/form_elements_outlined.png") -19px top no-repeat;
}

这是小提琴：

http://jsfiddle.net/xedret/bTAGU/

于 2013-08-02T17:17:42.830 回答