Change default text in input type=file?
Each browser has it's own rendition of the control and as such you can't change either the text or the orientation of the control.
There are some "kind of" hacks you may want to try if you want an html/css solution rather than a Flash or silverlightsolution.
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
Personally, because most users stick to their browser of choice, and therefore are probably used to seeing the control in the default rendition, they'd probably get confused if they saw something different (depending on the types of users you're dealing with).
How change text and color of button Browse of input file?
Appearance and functionality is ok, but this is not your real expected one. think this is help to you.
<input type="text" id="fileName" readonly="readonly" >
<div class="file_input_div" style="display: inline;">
<input type="button" id="button" value="Open"/>
<input type="file" style="opacity:0; position:relative; left:-40px;" onchange="javascript: document.getElementById ('fileName') . value = this.value"/>
</div>
CSS
#button{
position: relative;
left:-1px;
background-color:#446655;
}
DEMO
Replace input file with my own button in the form
You'll achieve this with couple of lines of CSS. Fiddle
input[type="file"] { display: none;}.custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer;}
<label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> Custom Upload</label><input id="file-upload" type="file"/>
Change the No file chosen:
I'm pretty sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). Check out this button styling article
change language input type=file
It's not possible to translate "Choose file" and "no file chosen" labels, as those are native browser elements and depend on browser's language.
However, you may try some tricks like putting image instead of button or making file input transparent (and add text input below).
Browse through those answers to choose if any is suitable:
How to change the button text of <input type=“file” />
?
Change default text in input type=“file”
?
Styling an input type=file button
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.
Even the size of the input will not respond to the likes of:
<input type="file" style="width:200px">
Instead, you will need to use the size attribute:
<input type="file" size="60" />
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.
UPDATE
Although it's difficult to style an <input>
tag directly, this is easily possible with the help of a <label>
tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619
Related Topics
Are Iframes Considered 'Bad Practice'
Is There a Minlength Validation Attribute in Html5
Inline Elements Shifting When Made Bold on Hover
Using External Images For CSS Custom Cursors
How to Create a Checkbox With a Clickable Label
Center Text Over an Image in Flexbox
How to Add an Image to an Event With Microdata Meta Tag
Html: Include, or Exclude, Optional Closing Tags
≪!--[If !Ie]≫ Is Not Working as Expected in This Case
How to Make a Curved Edge Hexagon by Using Css
Equal Height Rows in a Flex Container
Should I Use ≪I≫ Tag For Icons Instead of ≪Span≫
Reading HTML Content from a Uiwebview
How to Target a Specific Column or Row in CSS Grid Layout
Adding a Favicon to a Static HTML Page