给select设置背景
2015-04-07 13:01:25
在网页开发过程中，经常会遇到添加背景的的问题，其他的标签都好说，难度比较大的就是给form表单元素添加背景。下面我来给大家介绍一下如何给form表单元素添加背景。
先说简单一点的input元素的文本框，当我们给input设置background时会发现他的背景并没有出来，还是显示的是他默认的背景。我们用下面的方法来时他显示出来：
<input type="text" id="username" name="name" style="background: url() no-repeat center ;pxbackground:transparent;BACKGROUND-COLOR: transparent; border-style:none;"/>下面来说一下难度比较大的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标签添加背景了。下面我给大家来一段演示一下：
<html>
<head>
<title>落帆亭实现的给select标签添加背景</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function ip1(){
document.getElementById("ip1").value=$("#s1 option:selected").text();
}
window.onload=function(){
ip1();
}
</script>
</head>
<body>
<div style="width: 45%; z-index: 2;position: absolute;height:3%;top:0" >
<label style="width: 87%;background: url(http://am67.qiniudn.com/fengfan/images/k2.png) no-repeat 95% ;position: absolute;left:0%;height: 100%;">
<input id ="ip1" type="text" value="" name="" style="width: 97%;background:transparent;font-size: 80%;height: 79%;padding: 0 0;pxbackground:transparent;BACKGROUND-COLOR: transparent; border-style:none;font-size: 14px;"/>
</label>
</div><br/>
<div style="width: 100%; z-index: 2;position: absolute;top: 0;min-height: 13.5%;">
<label class="ctys">
<select id="s1" name="user.shengfen" onchange="ip1()" style="width: 39%;font-size: 100%;opacity:0;height: 100%;padding: 0 0;">
<option>落帆亭</option>
<option>luofanting.com.cn</option>
<option>欢迎您</option>
</select>
</label>
</div><br/><br/>
</body>
</html>
<select></select>代码中有不明白的可以给我留言哈。