位置:首页 > HTML+CSS >

修改复选框CheckBox默认样式

字号+ 作者:micloud 来源:www.seoalphas.com 2019-01-10 11:43 浏览量:3476

CheckBox默认样式选中状态在数据较多的情况下不太显眼,需要调整其颜色,一眼就能发现的那种

HTML:

<label class="checkBox"><input type="checkbox">全选</label>


css:


input[type='checkbox']{
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance:none;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    outline: none;
}
.checkBox input[type=checkbox]:checked{
   background: url("../images/checkbox_icon.png")no-repeat center;
}


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • css border属性边框一半或者部分可见

    css border属性边框一半或者部分可见

    浏览次数:15602

  • CSS选取第几个标签元素:nth-child、first-child、last-child

    CSS选取第几个标签元素:nth-child、first-child、last-child

    浏览次数:14418

  • pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    浏览次数:7315

  • CSS3 :nth-child(n)选择器 匹配属于其父元素的第N个子元素

    CSS3 :nth-child(n)选择器 匹配属于其父元素的第N个子元素

    浏览次数:4369

网友点评
评论区域