html select背景,给select设置背景

2015-04-07 13:01:25

在网页开发过程中，经常会遇到添加背景的的问题，其他的标签都好说，难度比较大的就是给form表单元素添加背景。下面我来给大家介绍一下如何给form表单元素添加背景。

先说简单一点的input元素的文本框，当我们给input设置background时会发现他的背景并没有出来，还是显示的是他默认的背景。我们用下面的方法来时他显示出来：

下面来说一下难度比较大的select标签。他和input差不多，也是加上background时不显示背景，依然显示原来的默认背景。有朋友会说把它设置为和input一样不就可以了吗。其实刚才我说差不多是因为他也是没办法加上背景。其实这也不是完全没有办法，我们可以采用模拟的方式来给select标签添加背景。先来说一下原理：我们让select标签透明化，我们可以添加下面这段代码

pxbackground:transparent;BACKGROUND-COLOR: transparent; border-style:none;

但是很快你就会发现完全没有效果，他这段代码并不能使select标签透明，可以说这段代码对于select标签完全没有用。我们可以采用另一种透明属性，这种方式采用css方式来实现，就是给select标签添加opacity属性，将他的值设置为0，即可实现select标签透明。同时又会有新的问题出现了，那就是select的标签里的字也随着select标签透明了。那么我们就该用上模拟的方式了，那就是在select标签下添加一个input标签，让select标签覆盖input，同时给select添加onchange事件，通过js的方式来获取select标签的内容，当select标签更改时将select选中的值赋值给input，因为select是透明的，所以在他下面的input里的字就显示出来了，同时点击select时不会点到input，这时就可以采用上面我说到的给input添加背景的方法了，此时给input添加背景就等同于给select添加背景了。到此就完美的实现了给select标签添加背景了。下面我给大家来一段演示一下：

代码中有不明白的可以给我留言哈。