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
How to customize <input type=file>?
You can’t modify much about the input[type=file]
control itself.
Since clicking a label
element correctly paired with an input will activate/focus it, we can use a label
to trigger the OS browse dialog.
Here is how you can do it…
label { cursor: pointer; /* Style as you please, it will become the visible UI component. */}
#upload-photo { opacity: 0; position: absolute; z-index: -1;}
<label for="upload-photo">Browse...</label><input type="file" name="photo" id="upload-photo" />
Styling of the input type file not working
We cannot do much customization of the file input. But you have options like below.
Note: I have used Bootstrap for some classes as your code is using it. But if you want you can have custom classes as well.
One disadvantage is that the select file information is also hidden. If you want that you can get that using JavaScript and show below the button.
input[type='file'] {
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<label>
<input id="Image" type="file" class="form-control-image" name="image_reference">
<span class="btn btn-primary">File button</span>
</label>
<br />
<br />
<button class="btn btn-primary form-control-image">Submit</button>
How to style file input?
In order to achieve that, you can wrap the input button with "label", so that label becomes clickable. Then make your input button opacity 0 (transparent).
$('.file-submit').on('change', function(){ $(this).closest('.btn-wrapper').find('span') .text('FOTOS Formatos aceptados: JPG');})
.btn-wrapper { font-family: 'Veranda', sans-serif;}
.btn-file { padding: 8px 15px; background-color: #fd8907; border-radius: 3px; color: #fff; margin-right: 8px;}
.btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block;}
.btn-file span { display: block; color: #777;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><td> <div class="btn-wrapper"> <label class="btn-file"> Elegir archivos <input type="file" class="file-submit" name="fileUpload" accept=".jpg" multiple="multiple"> </label> <span>No se eligio archivo</span> </div></td>
Get file name when css is applied to input[type=file]
Following this Answer, you can get the file name, and use innerHTML
to show it to user.
document.getElementById('test').addEventListener("change", function() {
var fullPath = document.getElementById('test').value;
if (fullPath) {
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
document.getElementById("test2").innerHTML = filename;;
}
});
.submit {
width: 140px;
height: 40px;
background-color: red;
color: #fff;
text-align: center;
padding: 10px;
line-height: 40px;
cursor: pointer;
}
<input type="file" id="test" style="display:none;">
<label for="test">
<span class="submit">submit</span>
<span id="test2">filename</span>
</label>
How to style contact form 7 file input buttons
You cannot style the button of file upload like any button, instead you may use pseudo element to cover the button and apply style to it. You may try something like this. You can change the content and the style of the "new" button like you want :
span.cv { position:relative;}span.cv:before { content:"Upload file"; position:absolute; left:0; padding:5px; background:red; color:#fff; width:130px; text-align:center; border-radius:5px; cursor:pointer;}span.cv>input { visibility:hidden;}
<div role="form" class="wpcf7" id="wpcf7-f47-o1" lang="en-US" dir="ltr"> <div class="screen-reader-response"></div> <form action="/Lester_Goddard_New/#wpcf7-f47-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="47" /> <input type="hidden" name="_wpcf7_version" value="4.9" /> <input type="hidden" name="_wpcf7_locale" value="en_US" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f47-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> </div> <p><label class="form_label"> Your Name<span>*</span><br /><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label"> Your Email<span>*</span><br /><span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label">Tel<br /><span class="wpcf7-form-control-wrap tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" /></span></label></p> <p><label class="form_label">CV<span>*</span><br /><span class="wpcf7-form-control-wrap cv"><input type="file" name="cv" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" /></span></label></p> <p><label class="form_label">Cover Letter<br /><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span></label></p> <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form></div>
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).
CSS design a input field type=file
Here's the html:
<span class="filewrap">
Some funny german words I don't understand
<input type="file"/>
</span>
and here's the CSS:
.filewrap{
position:relative;
background:#000;
border:1px solid #cc0000;
padding:15px 100px;
color:#fff;
font-family:sans-serif;
font-size:12px;
}
input[type="file"]{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
cursor:pointer;
}
See this demo fiddle
How to enable file upload on React's Material UI simple input?
The API provides component
for this purpose.
<Button
variant="contained"
component="label"
>
Upload File
<input
type="file"
hidden
/>
</Button>
Related Topics
Select All Div Text With Single Mouse Click
Jqgrid Does Not Render Correctly in Chrome/Chrome Frame
Select All Elements With a "Data-Xxx" Attribute Without Using Jquery
Is It Possible For Flex Items to Align Tightly to the Items Above Them
Creating Svg Elements Dynamically With JavaScript Inside Html
Print ≪Div Id="Printarea"≫≪/Div≫ Only
How to Use CSS (And JavaScript) to Create a Blurred, "Frosted" Background
Changing a CSS Rule-Set from JavaScript
How to Save a Base64 Image to User'S Disk Using JavaScript
How to Display a JavaScript Var in HTML Body
How to Simulate a Mouseover in Pure JavaScript That Activates the CSS ":Hover"
How to Get Number of Rows in ≪Textarea ≫ Using JavaScript
Jquery CSS Plugin That Returns Computed Style of Element to Pseudo Clone That Element
How to Get Nth-Child Selector to Skip Hidden Divs
Event.Preventdefault() Vs. Return False
Is Chrome'S JavaScript Console Lazy About Evaluating Objects