css style for input type file which has image

Question

I want to leave space among file input which has png browse image.

  <input type="text" id="file12" name="file12" size=18 maxlength=500> 
   <div class="upload_wrapper" style="float: left;" id="up0">
  <img src="image/browse.png" style="height:30%,width:40%;"/>
  <input  style="width: 100px;height:10px;" id="uploadbtn4" name="pic[]" type="file" class="upload" name="bfile12" onchange="CopyMe(this, \'file12\');"/>
  </div><br>

css code

 <style type="text/css">
 input[type='file'] {
 color: transparent;
 float: right;
 margin-right:23%;
 }
 </style>

This is working finely for button without image.image upload button is look like as screen shot. enter image description here

Can you explain exactly what the problem is? I don't really understand what you mean. Thanks — user2279302
– user2279302, Commented Jan 24, 2015 at 12:01

Bhojendra Rauniyar · Accepted Answer · 2015-01-24 12:04:27Z

1

Firstly, you need to use semicolon instead of a comma while using multiple styling properties like style="height:30%,width:40%;" is wrong, should be style="height:30%;width:40%;"

Secondly, why don't you use margin in image itself?

<img src="image/browse.png" style="height:30%;width:40%;margin:0 23%;"/>

Finally, I would like to recommend you to use a class in the image and use styling there in your stylesheet:

<img src="image/browse.png" class="your_class" />

.your_class{
  height:30%;
  width:40%;
  margin: 0 23%;
}

answered Jan 24, 2015 at 12:04

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css style for input type file which has image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related