1

I'm trying to style the default file upload button using :before pseudo element. Here is my code. It is working fine in safari and chrome. But does not work in Firefox. When inspecting , it seems like :before element does not appear in firefox. How can this be fixed?

Code is give below. fiddle for those who prefers it - https://jsfiddle.net/ujucukxr/

input[type="file"] {
   font-size: 0.5em;
}

.file-upload::-webkit-file-upload-button {
  visibility: hidden;
}
.file-upload:before {
  content: 'Select a custom file';
  display: inline-block;
  background: #03C9A9;
  border-radius: 2px;
  padding: 5px 8px;
  outline: none;
  color: white;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  margin-right: 20px;
}
.file-upload:hover:before {
  border-color: #1BBC9B;
}
.file-upload:active:before {
  background: #1BBC9B;
}
<input id="push-notif-icon-upload" class="file-upload" accept="image/*" type="file" name="push_campaign[logo_attributes][upload]">
Sooraj
  • 9,717
  • 9
  • 64
  • 99
  • input, image, textarea, are some of these elements that are not suppose to generate pseudo-elements, firefox is, in my opinion, having the right behavior :( – G-Cyrillus May 15 '16 at 14:23
  • any idea how to style these elements in firefox ? – Sooraj May 15 '16 at 15:42
  • 1
    the most solid way i have seen since a long time is to use javascript, where you hide the input and creates a visual via html and css . javascript comes here to catch events and bend them to the input http://stackoverflow.com/questions/3226167/how-to-style-input-file-with-css3-javascript – G-Cyrillus May 15 '16 at 15:46

0 Answers0