仿照Bootstrap的input 修改 upload上传图片的样式

html：

1 2 3 4 5 6 7 8 9 10

< div  class = "form-group" >      < label  class = "col-sm-3 col-sm-6 control-label" >图片</ label >      < span  class = "problem-must" > </ span >      < div  class = "col-sm-8" >          < a  class = "fb-upload"  href = "javascript:void(0);" >               < input  class = "form-control"  name = "pic"  type = "file"  accept = ".gif,.jpg,.png,.jpeg"  />               < span  class = "fb-img" >上传图片</ span >      </ a >      </ div > </ div >

css:

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

.form-group input[type= "file" ] {      cursor :  pointer ;      opacity:  0 ;      position :  absolute ;      top :  0 ; } .fb-img {      border :  1px  solid  #ccc ;      border-radius:  4px ;      box-shadow:  0  1px  1px  rgba( 0 ,  0 ,  0 ,  0.075 )  inset ;      color :  gray ;      display : inline- block ;      height :  34px ;      line-height :  1.42857 ;      padding :  6px  12px ;      text-align :  left ;      transition: border-color  0.15 s ease-in-out  0 s, box-shadow  0.15 s ease-in-out  0 s;      width :  100% ; }

本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1868944，如需转载请自行联系原作者