复选框checkbox自定义样式

纯CSS实现复选框自定义样式

  • 1、去掉默认样式
  • 2、第一种方式:用图片实现
  • 3、第二种方式:用字体图标实现

1、去掉默认样式

	input[type=checkbox]{
	    appearance:none;
	    -moz-appearance:none; /* Firefox */
	    -webkit-appearance:none;
	    //visibility: hidden;
	    cursor: pointer;
	    margin:0;
	}

2、第一种方式:用图片实现

用背景图的方式显示。

	// 初始状态
	input[type=checkbox]{
	   background-image:url("图片路径")}
	// 选中
	input[type=checkbox]:checked{
	   background-image:url("图片路径")}

3、第二种方式:用字体图标实现

不想用图片的话可以使用字体图标。未选中状态其实只有一个方框,可以考虑只用纯css来实现,字体图标也不要。
在这里插入图片描述

// 未选中状态
input[type=checkbox]:before{
    display: inline-block;
    font-family:"iconfont" !important;
    content: "\e63a"; 
    color:#999999;
    font-size:14px;
    width: 16px;
    height: 16px;
    padding-top: 1px;
    padding-right: 1px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
}
// 选中时
input[type=checkbox]:checked:before{
    display: inline-block;
    font-family:"iconfont" !important;
    content: "\e602";
    color:@mainColor;
    font-size:14px;
    width: 16px;
    height: 16px;
    padding-top: 1px;
    padding-right: 1px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
}

你可能感兴趣的:(前端,css)