Css style for input file type element

I  am using button styling from other my buttons on input type  file element because
as default it has no option for css styling,
html
<label class="custom-file-upload">
              <input type="file" id="imgLoader"></br>
 </label><br><br>

Open in new window


 input[type="file"] {
    display: none;
}

.custom-file-upload {
 background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #d4e0d3);
  background-image: -moz-linear-gradient(top, #ffffff, #d4e0d3);
  background-image: -ms-linear-gradient(top, #ffffff, #d4e0d3);
  background-image: -o-linear-gradient(top, #ffffff, #d4e0d3);
  background-image: linear-gradient(to bottom, #ffffff, #d4e0d3);
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 9px;
  text-shadow: 1px 1px 3px #a6a3d6;
  font-family: Georgia;
  color: #5e80ad;
  font-size: 12px;
  padding: 2px 7px 2px 7px;
  border: solid #b4d6ba 1px;
  text-decoration: none;
}

Open in new window


But I get just  circa 5px  of button length. I may not see it now, but i think i will also lose button caption "Choise file".
What i my add or how to modification css above to get a button?
Ivan GolubarAsked:
Who is Participating?
 
Jan LouwerensSoftware EngineerCommented:
The "Choose File" is on the input that you have hidden with the "display: none;" style.

To get you started, try something like:
.custom-file-upload:before
{
   content: 'Choose File';
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.