html - 如何在 css 中创建自定义复选框

标签 html css

enter image description here

我想创建一个这样的复选框。带有白色勾号和透明背景。有人可以帮我怎么做吗 我试过
input[type="checkbox"]{ 背景颜色:rgba(255,255,255,0.1); 白颜色;
但不像这里那样工作 codepen

最佳答案

你可以使用下面的 css 来获得相同的效果

working fiddle

input[type="checkbox"].hidden {
  display: none;
}

.demoCheck {
  border: 1px solid #ddd;
  width: 25px;
  height: 25px;
  display: block;
}

input[type="checkbox"]:checked.hidden + label {
  background: url(http://www.clipartsfree.net/vector/small/23493485345_Clipart_Free.png) center center no-repeat;
  background-size:cover;
}
<input type="checkbox" class="hidden" id="demo" >
<label for="demo" class="demoCheck demoCheckLabel"></label>

关于html - 如何在 css 中创建自定义复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44435120/

相关文章:

jquery - 更改单选按钮大小,将其隐藏在 div 中

css - 子菜单标题,h1 或 span/other

html - 如何让下划线在悬停时淡入链接下方?

html - 曲线形状的 Div 边框

javascript - 使用CSS关键帧动画后如何用jquery重新激活div

css - IE 和 :first-of-type

html - 模态的CSS - 如何将它定位在页面上方但在窗口中可滚动

html - 将行 div 中的 3 个 div 与文本居中对齐

html - 添加自动幻灯片已创建水平滚动?

javascript - 从 JavaScript 创建 Bootstrap 模态框