为form表单相关组件添加适用于手机上的背景

将主要的代码记录分享出来，以下内容当初是为了适应于手机端，PC端直接引用会出现格式问题，具体的大家自己修改css样式吧，Dome会在最后放出一个整体的。

为input的text加背景

关键代码

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

实例

<label  style="width: 46%;background: url(http://am67.qiniudn.com/fengfan/images/k1.png) no-repeat center ;position: absolute;left: 31%;height: 5%;">
    <input type="text"  name="user.name" style="width: 97%;background:transparent;font-size: 80%;height: 100%;padding: 0 0;BACKGROUND-COLOR: transparent;border-style:none;font-size: 14px;"/>
</label>

1
2
3

为select加背景

1.input与select结合

实现原理：应用为input添加背景原理，获取select取值，并通过Js赋值给input。

<script>

function ip1(){
	document.getElementById("ip1").value=$("#s1 option:selected").text();
}
 </script>
<body>
<form name="frm" style="position: absolute;height: 100%;width: 47%;left: 29%;">
     <div style="width: 47%; z-index: 2;position: absolute;height: 3%;top:24%;left:29%" >
	 <label style="width: 100%;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: 100%;background:transparent;font-size: 80%;height: 100%;padding: 0 0;pxbackground:transparent;BACKGROUND-COLOR: transparent; border-style:none;font-size: 14px;"/>
	</label>
      </div><br/>
      <label style="position: absolute;top: 24%;">select选择：</label>
      <form name="frm" style="position: absolute;height: 100%;width: 47%;left: 29%;">
	     <div style="width: 100%; z-index: 2;position: absolute;top: 20%;min-height: 3%;">
	        <label style='z-index: 2;width: 100%;position: absolute;height: 100%;border-radius:10px;overflow: hidden;'>
		    <select id="s1" onchange="ip1()" name="user.shengfen"  style="width: 100%;font-size: 80%;opacity:0;height: 100%;padding: 0 0;">
			<option>省份</option><option>河北</option> <option>湖南</option>
		     </select>

		</label>
	</div>


</form>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2.去掉select默认样式。

这个最简单了，只需在select的style样式中添加如下代码即可。

appearance: none;
-webkit-appearance: none;

1
2

为input的button加背景

此处以submit为例，实现原理：input图层用opacity透明化，通过z-index显示img图层

<div style="width: 61%; z-index: 2;position: absolute;top: 39%;min-height: 4%;opacity:0" >

	<input id="submits"  type ="submit" value ="提    交" style="width: 100%;position: absolute;height: 100%;padding: 0 0;" />
</div>
<div style="width: 61%; z-index: 1;position: absolute;top: 39%;min-height: 3%;">
	<img src="http://am67.qiniudn.com/fengfan/images/submit.png" style="width:100%;"/>
</div>

1
2
3
4
5
6
7

Dom演示

dom演示会出现错位问题，请根据需求自己调试css样式即可

Preview

除特别注明外，本站所有文章均为 Windcoder网原创，转载请注明出处来自： wei-form-biao-dan-xiang-guan-zu-jian-tian-jia-shi-yong-yu-shou-ji-shang-di-bei-jing
License CC BY-SA 4.0 以商业目的使用本网站原创内容需获许可，非商业目的使用授权遵循CC BY-NC 4.0

Loading comments...

3 条评论

小小的坏2015-04-10 08:00:00
哈哈，我来啦
- 回复
动漫资讯2015-04-08 08:00:00
不错，先收藏了，博主的博客主题不错哈
- 回复
蜜汁炒酸奶 2015-04-09 08:00:00
回复 @动漫资讯：哈哈，O(∩_∩)O谢谢，好久不见
回复
1

Preview