HTML输入类型文件样式更改不起作用

Question

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);
    }
}

Answer 1

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

Answer 2

The reason the button disappears is because you have opacity: 0 thus making it totally, utterly, thoroughly and completely transparent. Ie 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.

Answer 3

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