css select file css style doesn't work

Question

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

Please, have a look, it might help you: http://stackoverflow.com/questions/572768/styling-an-input-type-file-button — akhikhl, Dec 23 '13 at 17:43

score 0 · Answer 1 · answered Dec 23 '13 at 17:48

0

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

answered Dec 23 '13 at 17:48

akhikhl

2,522
17
23

score 0 · Answer 2 · edited May 23 '17 at 11:50

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;"><a href="javascript: void(0)">Upload File</a></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

score 0 · Answer 3 · answered Dec 23 '13 at 19:51

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

score 0 · Accepted Answer · answered Dec 23 '13 at 22:41

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

css select file css style doesn't work

4 Answers4