CSS3 input[type=file] 样式美化，input上传按钮美化

html自带的上传按钮非常丑，在HTML4+CSS2时，想要美化文件上传还是很麻烦了。

HTML5+CSS3后，就非常方便了，实例如下：

思路：

input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。

代码如下：

DOM结构：

1 2	< a  href = "javascript:;"  class = "a-upload" >      < input  type = "file"  name = ""  id = "" >点击这里上传文件</ a >< a  href = "javascript:;"  class = "file" >选择文件    < input  type = "file"  name = ""  id = "" ></ a >

CSS样式1：

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

/*a  upload */ .a-upload {      padding :  4px  10px ;      height :  20px ;      line-height :  20px ;      position :  relative ;      cursor :  pointer ;      color :  #888 ;      background :  #fafafa ;      border :  1px  solid  #ddd ;      border-radius:  4px ;      overflow :  hidden ;      display : inline- block ;      * display :  inline ;      *zoom:  1 }.a-upload  input {      position :  absolute ;      font-size :  100px ;      right :  0 ;      top :  0 ;      opacity:  0 ;      filter: alpha(opacity= 0 );      cursor :  pointer }.a-upload:hover {      color :  #444 ;      background :  #eee ;      border-color :  #ccc ;      text-decoration :  none }

样式2：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.file {      position :  relative ;      display : inline- block ;      background :  #D0EEFF ;      border :  1px  solid  #99D3F5 ;      border-radius:  4px ;      padding :  4px  12px ;      overflow :  hidden ;      color :  #1E88C7 ;      text-decoration :  none ;      text-indent :  0 ;      line-height :  20px ;}.file input {      position :  absolute ;      font-size :  100px ;      right :  0 ;      top :  0 ;      opacity:  0 ;}.file:hover {      background :  #AADFFD ;      border-color :  #78C3F3 ;      color :  #004974 ;      text-decoration :  none ;}

样式一效果：

样式二效果：