为form表单相关组件添加适用于手机上的背景
将主要的代码记录分享出来，以下内容当初是为了适应于手机端，PC端直接引用会出现格式问题，具体的大家自己修改css样式吧，Dome会在最后放出一个整体的。
为input的text加背景
关键代码
background:transparent;BACKGROUND-COLOR: transparent; border-style:none;
1
实例
<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
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
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
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
2
3
4
5
6
7
Dom演示
dom演示会出现错位问题，请根据需求自己调试css样式即可
预览
除特别注明外，本站所有文章均为 Windcoder网 原创，转载请注明出处来自： wei-form-biao-dan-xiang-guan-zu-jian-tian-jia-shi-yong-yu-shou-ji-shang-di-bei-jing
Loading comments...
预览
哈哈，我来啦
不错，先收藏了，博主的博客主题不错哈
回复 @动漫资讯： 哈哈，O(∩_∩)O谢谢，好久不见