学习日记--多选框样式自定义修改

参考资料：https://www.cnblogs.com/yuanyanbk/p/8136682.html

 /*多选框的样式修改*/
    input[type=checkbox] {
        -webkit-appearance: none; /*这个属性是将input标签变成一个可修改样式的普通标签，目前有谷歌和火狐浏览器支持*/
        -moz-appearance: none;
        width: 11px;
        height: 11px;
        border-radius: 2px;
        background-color: transparent;
        border: 1px solid #1BBA79;
    }
 
.checkBox input[type=checkbox]:checked{
   background: url("../images/checkbox_icon.png")no-repeat center;
}
 
 
//使用背景图片实现

上一篇vue "keyId=xxxxx&keyId=xxxxx&keyId=xxxxx" 传值办法

下一篇mysql 数据库迁移办法

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961362.html

posted @ 2022-12-06 22:21 轻风细雨_林木木阅读(73) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

轻风细雨_林木木

做最优秀的自己。

学习日记--多选框样式自定义修改

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	/多选框的样式修改/
	input[type=checkbox] {
	-webkit-appearance: none; /这个属性是将input标签变成一个可修改样式的普通标签，目前有谷歌和火狐浏览器支持/
	-moz-appearance: none;
	width: 11px;
	height: 11px;
	border-radius: 2px;
	background-color: transparent;
	border: 1px solid #1BBA79;
	}

	.checkBox input[type=checkbox]:checked{
	background: url("../images/checkbox_icon.png")no-repeat center;
	}


	//使用背景图片实现