HTML笔记 ·

给select设置背景

在网页开发过程中,经常会遇到添加背景的的问题,其他的标签都好说,难度比较大的就是给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>

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

参与评论