-2

I have an input of type file. 'Choose File' will be displayed on the button and beside it, 'No file chosen' will be displayed. But i want to change the button color and text of the button.

http://jsfiddle.net/e5e0zhsb/3

<form action="demo_form.asp">
  Select a file: <input type="file" name="img" class='customBtn'>
  <input type="submit"/>
</form>

I tried adding some css

.customBtn input[type='file'] {
  color:#f00
}

Can some one help me on this?

Rajeshwar
  • 2,290
  • 4
  • 31
  • 41

2 Answers2

1

Complete example:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
label, input {
  color: #333;
  font: 14px/20px Arial;
}
h2 {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 1em;
}
label {
  display: inline-block;
  width: 5em;
  padding: 0 1em;
  text-align: right;
}

/* Hide the file input using
opacity */
[type=file] {
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
}
input,
[type=file] + label {
  border: 1px solid #CCC;
  border-radius: 3px;
  text-align: left;
  padding: 10px;
  width: 150px;
  margin: 0;
  left: 0;
  position: relative;
}
[type=file] + label {
  text-align: center;
  left: 7.35em;
  top: 0.5em;
  /* Decorative */
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}
[type=file] + label:hover {
  background: #3399ff;
}
</style>
<form action="demo_form.asp">
  <input id="f02" type="file" placeholder="Add profile picture" />
  <label for="f02">Add profile picture</label>

</form>
<script>

$("[type=file]").on("change", function(){
  // Name of file and placeholder
  var file = this.files[0].name;
  var dflt = $(this).attr("placeholder");
  if($(this).val()!=""){
    $(this).next().text(file);
  } else {
    $(this).next().text(dflt);
  }
});
</script>

</html>

Copied From http://codepen.io/nopr/pen/rpsnd

itzMEonTV
  • 19,851
  • 4
  • 39
  • 49
-1

Add an id or class to your input element. Worked for me!

Leuven Wang
  • 141
  • 2
  • 12