HTML笔记 ·

给select设置背景

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

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

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

但是很快你就会发现完全没有效果,他这段代码并不能使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标签添加背景了。下面我给大家来一段演示一下:

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

参与评论