失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > checkbox选中时如何改变默认样式

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

时间:2019-03-24 18:57:59

相关推荐

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/xz@2x.png) ; /*复选框的背景图*/background-size: contain;}

上个选中后的效果,往下看

我这里的背景图片是36px*36px的,所以在设置w、h时都设的18px,其他的可根据自己具体情况修改!

如果觉得《checkbox选中时如何改变默认样式》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。