相关疑难解决方法(0)

仅使用CSS和HTML的自定义复选框

我只需要使用html和CSS创建一个自定义复选框.到目前为止,我有:

HTML/CSS:

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px …
Run Code Online (Sandbox Code Playgroud)

html css checkbox input pseudo-element

14
推荐指数
1
解决办法
1万
查看次数

标签 统计

checkbox ×1

css ×1

html ×1

input ×1

pseudo-element ×1