Decorating Browse button with css

Question

I have added a "browse" button for file upload with this command

<input type="file" name="ForUpload[]" id="ForUpload" class="brw" onchange="addIitem()" on>

and this css style

.brw {
  font-size: 20px;
  color: white;
  display: inline-block;
  background: #1CB6E0;
  border: none;
  padding: 7px 15px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
}

As I run it with firefox, I see "No file selected" and "Browse..." as the button text. Please see the figure

I want to put a button and write a custom text as a placeholder, e.g. Please select the music file. How can I do that?

What is the 'on' at the end of the input? and why does this have the php tag? — sheriffderek, Aug 26 '17 at 07:29
Possible duplicate of [How to customize ?](https://stackoverflow.com/questions/5813344/how-to-customize-input-type-file) — sheriffderek, Aug 26 '17 at 07:29
PS: .brw is a really terrible class name. There's no way an outsider would ever know what that was. It's not worth saving the space - and you should just go all in and name it something descriptive - since you'll likely only write it twice - but ready it a hundred times. — sheriffderek, Aug 26 '17 at 07:31
@sheriffderek: Regarding the duplicate, I saw that topic but there are many different replies. Also, my css code is similar to one of the answers! which doesn't work for me — mahmood, Aug 26 '17 at 07:33

score 1 · Accepted Answer · answered Aug 26 '17 at 07:46

I would suggest using a label tag referenced to the input tag as the displayed button, and display:none for the input tag. The input tag is indeed not very CSS able.

.brw {
  font-size: 20px;
  color: white;
  display: inline-block;
  background: #1CB6E0;
  border: none;
  padding: 7px 15px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
}

<input type="file" name="ForUpload[]" id="ForUpload" style="display:none" onchange="addIitem()" on>
<label for="ForUpload" class="brw">For Upload</label>

You'll probably want to visually hide the input in a non display: none way - alla A11Y. — sheriffderek, Aug 26 '17 at 08:09

score 0 · Answer 2 · answered Aug 26 '17 at 07:32

In fact this button style is fixed and un-changeable, but you can set your style to another box, element or button and set the main file button invisible and set the styled box, element or button click event to trigger main file button click.

ankita patel · Answer 3 · 2017-08-26T08:03:07.460

I think this code is helpful for you.

'use strict';

;( function ( document, window, index )
{
 var inputs = document.querySelectorAll( '.inputfile' );
 Array.prototype.forEach.call( inputs, function( input )
 {
  var label = input.nextElementSibling,
  labelVal = label.innerHTML;

  input.addEventListener( 'change', function( e )
  {
   var fileName = '';
   if( this.files && this.files.length > 1 )
    fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
   else
    fileName = e.target.value.split( '\\' ).pop();

   if( fileName )
    label.querySelector( 'span' ).innerHTML = fileName;
   else
    label.innerHTML = labelVal;
  });

  // Firefox bug fix
  input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
  input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
 });
}( document, window, 0 ));

.brw {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}
.brw + label {
  background-color: #1DB6E0;
  color: #fff;
  cursor: pointer;
  padding:10px;  
  text-overflow: ellipsis;
  white-space: nowrap;  
} 
.brw + label svg {
  fill: currentcolor;
  height: 1.5em;
  margin-right: 0.25em;
  margin-top: -0.25em;
  vertical-align: middle;
  width: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <input type="file" name="ForUpload[]" id="ForUpload" class="inputfile brw" />
  <label for="ForUpload"><svg width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg><span>Please select the music file&hellip;</span></label>
</div>

sheriffderek · Answer 4 · 2017-08-26T08:08:59.277

.file-input {
  display: block;
  border: 1px solid #f00;
  cursor: pointer;
}
.file-input .label {
  border: 1px solid #00f;
}
.file-input .input {
  display: block /* to allow shape - since it's 'inline' by default */;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden /* probably a better way */;
}

<label for='file-input-1' class='file-input'>
  <div class='label'>
    <span>Put your  here</span>
  </div>

  <input id='file-input-1' class='input' type='file' />
</label>

Decorating Browse button with css

4 Answers4