0

can anyone help me to change the style of input type 'file' in html. i referred the below links but my problem is not resolved.i need to give color to the browse-button, when i try to apply style to browse-button, the text-box disappears i cant see what file i have selected in the text-box. here is my code:

<div id="fileimport">
    <div class="fileupload">
        <input type="file" name="Upload" style="position: relative" />
    </div>
</div>

input.file {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

div.fileupload {
    position: relative;
}

$('input[type=file]').on('change', prepareUpload);
function prepareUpload(event) {
    files = event.target.value;
    if (files != null) {
        $("#ShiftValidate").prop('disabled', false);
    }
}
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
user2122825
  • 57
  • 1
  • 3
  • 14

3 Answers3

1
input[type=file] {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
Irfan TahirKheli
  • 3,652
  • 1
  • 22
  • 36
0

The reason the button disappears is because you have opacity: 0 thus making it totally, utterly, thoroughly and completely transparent. I.e. invisible. HG Well's invisible man did it by giving himself an opacity of zero! Try a value such as opacity: 0.5.

But Irfan's answer is needed as well, to correct your syntax.

GuyH
  • 786
  • 1
  • 4
  • 8
0

Basically you need to hide the file input and replace it with a wrapping element. And then you need to do some js to get the name of the file you're uploading and put that into another input.

<div class="btnWrap"> <span class="text">Choose file</span> <input type="file" name="file"> </div> <input type="text" class="fileNames" value="No file selected">

I made a pen for you: http://codepen.io/eplehans/pen/gbpZoQ

hanserino
  • 130
  • 10