css select file css style doesn't work [duplicate] - html

Question

This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 9 years ago.
I am trying to create input file button with css style . But it does not work. My css code woking all browser but style is not working....
This is my script. enter link description here
This is inptu type html code :
<input type="file" name="select_img" class="select_style" />
And this is css code:
.select_style {
float:left;
width: 80px;
height: 27px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: rgba(255,255,255,1);
font: normal 12px/27px "Lucida Grande";
border: 1px solid rgba(44,81,21,0.24);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}

Answer 1

This tutorial: http://www.quirksmode.org/dom/inputfile.html gives very detailed instructions on how to style input[type=file] with css.

Answer 2

Give .select_style and opacity of 0 and create a different div element with the other styles you have along with a z-index of -1. Then use relative positioning on that div to put it in the exact same spot as the file input. Then, when the user clicks on that styled div they will actually be clicking on the file input.
Example:
<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;">Upload File</button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px;; left: -20px" />
</div>
Taken from this answer: https://stackoverflow.com/a/3030174/2374365

Answer 3

Look at this one it might help you
http://jsfiddle.net/gabrieleromanato/mxq9R/
HTML
<form action="" method="post" enctype="multipart/form-data">
<div class="upload">
<input type="file" name="upload"/>
</div>
</form>
CSS
iv.upload {
width: 157px;
height: 57px;
background: url(https://lh6.googleusercontent.com/-dqTIJRTqEAQ/UJaofTQm3hI/AAAAAAAABHo/w7ruR1SOIsA/s157/upload.png);
overflow: hidden;
}
div.upload input {
display: block !important;
width: 157px !important;
height: 57px !important;
opacity: 0 !important;
overflow: hidden !important;
}

Answer 4

Hi everyone this is my solution code thanks for help, but all code is not usefull for me i create new code then i solved my problem.
Click and see in jsfiddle.net
HTML input code is here:
<input type="file" class="file-input">
And only css for input type file button:
it is very user full i used rgb color with hover effect.
.file-input {
color: transparent;
}
.file-input::-webkit-file-upload-button {
visibility: hidden;
}
.file-input::before {
content: 'Select files';
color:#fff;
display: inline-block;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font-size: 10pt;
}
.file-input:hover::before {
border-color: black;
}
.file-input:active {
outline: 0;
}
.file-input:active::before {
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -moz-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -o-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -ms-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: linear-gradient(top, #008c10 0%,#00c714 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
body {
padding: 20px;
}