为form表单相关组件添加适用于手机上的背景
为form表单相关组件添加适用于手机上的背景
WindCoder
发布于 2018-09-20 14:37:54
发布于 2018-09-20 14:37:54
将主要的代码记录分享出来，以下内容当初是为了适应于手机端，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样式即可
相关下载
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录