I design a input file as:
<input type="file" name="file" id="file" size="52" />
I want to change text and color of button "Browse..". Can you help me? thanks all.
-
3It is very much browser architecture and OS dependent feature, and it cannot be changed. But you can use plugins.Praveen Kumar Purushothaman– Praveen Kumar Purushothaman2012-09-25 08:13:43 +00:00Commented Sep 25, 2012 at 8:13
-
Try the answers to the question stackoverflow.com/questions/4860865/…PHP Bugs– PHP Bugs2012-09-25 08:21:10 +00:00Commented Sep 25, 2012 at 8:21
Add a comment
|
6 Answers
There is the pseudo element ::file-selector-button.
Use it like:
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
Comments
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;
}
answered Sep 25, 2012 at 9:05
Mangala Edirisinghe
1,1012 gold badges16 silver badges32 bronze badges
1 Comment
Bhawna Malhotra
if in your styling i give the width to it that is trying to expand the button then it is not opening file choose . check here jsfiddle.net/smart_tech/w9k6tbu5
it is browser architecture dependent. you cant do much about it.
still there are already some discussions about this on stackoverflow
you should check this out
Visit How to change the button text of <input type="file" />?
Hope this helps
PS: From next time make sure you are not posting a duplicate question
Comments
It is very much browser architecture and OS dependent feature, and it cannot be changed.
Using an overlay
But you can overlay other elements on top of this and hide the default look. You can also use some plugins, which do this for you.
jQuery File Upload is one such plugin capable of doing it.
answered Sep 25, 2012 at 8:15
Praveen Kumar Purushothaman
167k27 gold badges215 silver badges261 bronze badges
2 Comments
techfoobar
Why the downvotes? This answer part is correct. It cannot be changed. The ONLY way is underlaying the input with some other styled element either directly or via some plugin that does it.
Luca Rainone
mmh I'm not the downvoter, but I don't like your answer. Because there is a contradiction: first you say that "it cannot be changed", and after you say that a plugin can do it (a jquery plugin is not a browser plugin, it's simply injection of js, css and html: so it's possible to change it too for us without plugins). I think that your answer can be improved :) (I repeat it: i'm not the downvoter)
Please try this : https://codepen.io/claviska/pen/vAgmd
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Browse… <input type="file" style="display: none;" multiple>
</span>
</label>
<input type="text" class="form-control" readonly>
</div>
$(function() {
$(document).on('change', ':file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
// We can watch for our custom `fileselect` event like this
$(document).ready( function() {
$(':file').on('fileselect', function(event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
});
});
Comments
You can found it here:
http://www.quirksmode.org/dom/inputfile.html
The post is too long to be copied here.
Basically, you will stylist an input[type=text] (which is user will see), and put an input[type=file] opacity = 0 on top of the input[type=text].
Hope this can help.
For webkit browser only, you can use CSS attribute -webkit-appearance to clear default style and start to stylist it from the beginning.
