5

I design a input file as:

 <input type="file" name="file" id="file" size="52"   />

enter image description here

I want to change text and color of button "Browse..". Can you help me? thanks all.

Core Xii
  • 6,270
  • 4
  • 31
  • 42
mum
  • 1,637
  • 11
  • 34
  • 58

6 Answers6

6

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

Roland Fredenhagen
  • 171
  • 2
  • 3
4

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

Mangala Edirisinghe
  • 1,111
  • 2
  • 15
  • 32
  • 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 https://jsfiddle.net/smart_tech/w9k6tbu5/ – Bhawna Malhotra Apr 13 '16 at 07:44
0

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.

Demo: http://blueimp.github.com/jQuery-File-Upload/

Community
  • 1
  • 1
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • 1
    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. – techfoobar Sep 25 '12 at 08:22
  • 2
    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) – Luca Rainone Sep 25 '12 at 09:00
0

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

Community
  • 1
  • 1
Mukul Goel
  • 8,387
  • 6
  • 37
  • 77
0

Please try this : https://codepen.io/claviska/pen/vAgmd

<div class="input-group">
            <label class="input-group-btn">
                <span class="btn btn-primary">
                    Browse&hellip; <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);
      }

  });
});

});
Devendra Singraul
  • 797
  • 9
  • 17
-1

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.

Bang Dao
  • 5,091
  • 1
  • 24
  • 33