javascript - Styling input type file button - Stack Overflow

admin管理员组

文章数量:1287579

I have a question regarding the styling of the input type file button. Since I cannot style the file input button, can I make a div that I can style how I want and when I click it , it triggers the input type button which opens the browse window ? If yes, any suggestions how to do it ? Thank you.

I have a question regarding the styling of the input type file button. Since I cannot style the file input button, can I make a div that I can style how I want and when I click it , it triggers the input type button which opens the browse window ? If yes, any suggestions how to do it ? Thank you.

• javascript
• html

Share Improve this question Follow asked Dec 16, 2012 at 10:24 southpaw93southpaw93 1,96155 gold badges2323 silver badges4040 bronze badges 2

• Yes, you can probably do that. You should have a go and ask a more specific question when you get stuck. – RichardTowers Commented Dec 16, 2012 at 10:27
• 1 possible duplicate of Styling an input type="file" button – Peter O. Commented Dec 16, 2012 at 14:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

May be you can hide the input element and make use of a div for styling purposes..

<input type="file" id="myFileInput" onchange="$('#myFileDiv').text($(this).val());" style="display:none;" />
<div id="myFileDiv" onclick="$('#myFileInput').click();">
    Select File..
</div>

You can style the file input with just css

label[for="file-input"] {
  display: block;
  margin-bottom: 1em;
  font-size: 1em;
  color: #fff;
  opacity: .9;
  font-weight: bold;
}

input[type="file"] {
  cursor: pointer !Important;
}
input[type="file"]::-webkit-file-upload-button {
  border: none;
  padding: 5px 12px;
  background: #9e2baf;
  color: #fff;
  font-size: 1em;
  transition: all .4s;
  cursor: pointer;
  border-radius: 20px;
}
input[type="file"]::-ms-browse {
  border: none;
  padding: 5px 12px;
  background: #9e2baf;
  color: #fff;
  font-size: 1em;
  transition: all .4s;
  cursor: pointer;
  border-radius: 20px;
}

                     <label class="file-label" for="input-file">Attach file:</label>
                     <br /> <input type="file" name="attachment[]"  multiple="multiple">
                         

Yes you can, this is one of the most used hacks for styling file-input.

Take a look at http://www.quirksmode/dom/inputfile.html

本文标签： javascriptStyling input type file buttonStack Overflow