解决方法：用普通标签模拟，背景图设置在普通标签里面，表单功能还是用input来实现，交互功能得用JavaScript来实现。换句话说，CSS控制普通标签的样式来美化表单，JavaScript实现表单交互功能。
案例分析：移动端兼容 - 调用相册的按钮样式处理
具体情形：<input type="file" accept="image/*capture=camera">或者<input type="file" capture="photo">设背景图无效。在我们的移动端网页当中，会有上传照片的操作需求。此时会使用到文件类型的input文本框，但是不同的系统不同的浏览器在样式上均不相同，而且，设置背景图也没有效果。
解决方法：通过设置opacity为0来进行模拟，背景图设置在其他标签里面。换句话说样式用普通标签模拟，功能用input来实现。
测试效果图：
《CSS美化表单大集锦》
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
input{ border:0px}
.ov{ border:2px solid #009999}
.input{ border:0px}
</style>
</head><body>
<form id="form1" name="form1" method="post" action="">
<table width="366" border="0" cellspacing="1" bordercolor="#333333" bgcolor="#333333">
<tr>
<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"></td>
<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>A</label></td>
<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>B</label></td>
</tr>
<tr>
<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">1</td>
<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield" />
</label></td>
<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield2" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">2</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield3" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield4" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">3</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield5" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield6" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">4</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield7" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield8" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">5</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield9" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield10" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
做了一个，功能差不多的。
1、按钮的margin-left:-10px这样的负值。或者学度娘，取消input边框另作。
2、css里面font-size:16pxfont-family:"Times New Roman",Georgia,Serif这样。
3、可以设置input的type为image，然后加背景图片。
给出一个例子
<!DOCTYPE HTML><html lang="en">
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>test</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen">
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<div class="search">
<input id="search" type="text" autofocus="autofocus" >
<div class="submit">搜索</div>
</div>
<style type="text/css">
.search{width:300pxoverflow: hiddenborder:1px solid #dddfont-size:16pxheight:2emline-height: 2em}
.search:hover{border:1px solid #00af60}
.search input#search{padding-left: 10pxoutline: nonewidth:230pxborder:0}
.search .submit{cursor:pointerfloat: rightpadding:0 10pxcolor: #00af60border-left: 1px solid #ddd}
.search:hover .submit{background: #00af60color:#FFFborder:0/*background:url(1.jpg)*/}
</style>
<script type="text/javascript">
$(function(){
$('.search').hover(function(){$('#search')[0].focus()})//
$('.search .submit').click(function(){
alert("在此检查然后js提交")
})
})
</script>
</body>
</html>
