表单美化在前端开发中经常使用到,CSS3中有很多对我们有利的伪类和属性选择器,今天主要来说说使用属性选择器和label来进行美化,不使用伪类。
首先,先来看下美化后的相关效果:

下面我们来看看实现的思想:
1、首先隐藏input
2、在label中设置背景即可
首先我们要先了解一下几个关于浏览器的知识点:
浏览器中,chrome在input的focus的时候会自动增加一个蓝色的外边框,以及select下拉,在Firefox和chrome下的显示都不一样,如下图chrome中的显示: 继续阅读CSS3 美化表单