解决方法：用普通标签模拟，背景图设置在普通标签里面，表单功能还是用input来实现，交互功能得用JavaScript来实现。换句话说，CSS控制普通标签的样式来美化表单，JavaScript实现表单交互功能。
案例分析：移动端兼容 - 调用相册的按钮样式处理
具体情形：<input type="file" accept="image/*capture=camera">或者<input type="file" capture="photo">设背景图无效。在我们的移动端网页当中，会有上传照片的操作需求。此时会使用到文件类型的input文本框，但是不同的系统不同的浏览器在样式上均不相同，而且，设置背景图也没有效果。
解决方法：通过设置opacity为0来进行模拟，背景图设置在其他标签里面。换句话说样式用普通标签模拟，功能用input来实现。
测试效果图：
《CSS美化表单大集锦》
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
*{ margin:0 padding:0}
body{ background-color:rgba(153,153,204,0.3)}
#main{ margin:80px auto background-color:rgba(102,153,255,1) width:500px border-radius:10px}
ul{ text-align:centerpadding:15px}
ul li{ text-align:left list-style:none padding:15px}
.ys1{ border:none border-bottom:1px solid #000background-color:rgba(102,153,255,1)}
.ys2{ padding:4px}
textarea{ height:80px width:220px}
</style>
<body>
<form action="" method="get">
<div id="main">
<ul><h3>快递运单信息</h3>
<li>1.收货人：<input class="ys1" type="text">
2.目的地：<select ><option>北京</option></select>
</li>
<li>3.联系电话：<input class="ys1" type="text"></li>
<li>4.详细地址：<textarea></textarea></li>
<li><input type="button" class="ys2" value="提 交"> <input type="reset" class="ys2" value="重 置"></li>
</ul>
</div>
</form>
</body>
</html>
