Web笔记 ·

为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>

为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>

 2.去掉select默认样式。

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

appearance: none;
-webkit-appearance: none;

 

为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>

 Dom演示

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

相关下载

点击下载

参与评论