Adding style to file upload button in css

Question

I have a text field and button with following css:

JS fiddle link : http://jsfiddle.net/Tdkre/

.submit {
      -moz-box-shadow:inset 0px 1px 0px 0px         


        

Answer 1

Try this solution: http://jsfiddle.net/JJRrc/1/

Html

  
  upload
    
       
    
  

CSS

.form input[type="file"]{
  z-index: 999;
  line-height: 0;
  font-size: 50px;
  position: absolute;
  opacity: 0;
  filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
  cursor: pointer;
  _cursor: hand;
  margin: 0;
  padding:0;
  left:0;
  }
 .add-photo-btn{
   position:relative;
   overflow:hidden;
   cursor:pointer;
   text-align:center;
   background-color:#83b81a;
   color:#fff;
   display:block;
   width:197px;
   height:31px;
   font-size:18px;
   line-height:30px;
   float:left;
 }
 input[type="text"]{
   float:left;
 }

JQuery

$('#myfile').change(function(){
  $('#path').val($(this).val());
});