checkbox选中时如何改变默认样式

	刚刚发布了人生中的第一篇博客,然后期待的点开,回味一下,不看不知道,一看吓一跳,我的天,前面都是些什么东西,还是说所有的第一篇都是那样的,如果您不小心点开了我。。。的第一篇博客,请直接跳到最下面,那几行才是我的内容,这是第二篇,希望不要在那什么什么的。
	好了,我的废话太多了,说点有料的东西
	**1.**是关于checkbox的,checkbox在选中、未选中的时候是有默认样式的,但是我们是干前端的,要对页面有一定的审美,所以样式很重要,听着,是很重要,一般我们选中它时,会给它一个样式,如背景图片(柠檬好像只用图片代替过默认样式)。
	这时,就要给它在选中后,也就是checked的时候加样式,怎么加呢?柠檬曾听说过一句话:不上代码的讲解都是耍流氓,柠檬从不耍流氓(除非对方帅我一脸)。。。
	/* 复选框 */

input[type=“checkbox”] {
-webkit-appearance: none; /清除复选框默认样式/
border: 1px solid #627BF6;
vertical-align: middle;
width: 18px;
height: 18px;
float: left;
margin-top: 0;
margin-right: 0 !important;
border-radius: 0;
}
input[type=“checkbox”]:checked {
/* background-position: -48px 0; */
background: #627BF6 url(…/images/[email protected]) ; /复选框的背景图/
background-size: contain;
}

上个选中后的效果,往下看
在这里插入图片描述
在这里插入图片描述
我这里的背景图片是36px*36px的,所以在设置w、h时都设的18px,其他的可根据自己具体情况修改,这其实是我公司里的一个小哥哥教我这样做的,我把它分享给有需要的人,拿好不谢!

猜你喜欢

转载自blog.csdn.net/qq_34319049/article/details/86064132
今日推荐