T
We're Happier Together! NYC Devshop has joined the HappyFunCorp family! Learn more!

Devshop

Two ways to do a custom file field

Two ways to do a custom file field

Education

Two ways to do a custom file field

Posted by: Tea Ho

Tuesday, Jun 17th, 2014

File input fields are rendered differently in every browser and none of them are particularly attractive. This is especially annoying if you have a specific design you want implemented across browsers.

In attempting to customize the file field, I have found two ways to do this:

1. Pure CSS
HTML:

   <input type="file" class="pretty-input">

CSS:

    .pretty-input::-webkit-file-upload-button {

display: none;
}
.pretty-input::before {
content: 'Choose an image';
color: #fff;
width: 150px;
height: 45px;
line-height: 45px;
text-align: center;
text-transform: uppercase;
display: inline-block;
border-radius: 3px;
background: teal;
padding: 5px 8px;
outline: none;
-webkit-user-select: none;
cursor: pointer;
}

pros:
* For those who are jQuery shy, this is a quick fix.

* You are only affecting the original element, so it's more semantic.

cons:
* I still haven't figured out how to do this for Mozilla

* In its active state, you'll notice there is what appears to be extra padding on the righthand side. This is due to the actual input button still taking up space.

* If your button has a transparent background for some reason, or depending on the size of the button and its shape, you might still see the "no file chosen" text.

2. CSS & jQuery

HTML:

   <button class="pretty-input"> Choose an image </button>

<input type="file">

CSS:

    input[type=file]{

display: none;
}
.pretty-input {
content: 'Choose an image';
color: #fff;
width: 150px;
height: 45px;
text-align: center;
text-transform: uppercase;
display: inline-block;
border-radius: 3px;
background: teal;
padding: 5px 8px;
outline: none;
cursor: pointer;
border: none;
}

jQuery:

    $(function(){

$('.pretty-input').click(function(){
$(this).next().click();
})
});

* Note: this only works if the fake button is placed right before the real input. If you want it elsewhere, you can target a specific ID.

pros:
* It's easier to style a button from scratch without having to override the original input's settings (you don't have to deal with any of the annoying blue focus outlines or anything)

* You could potentially make anything an input field, including photos or whatever you want.

* It works in every browser

cons:
* You need to create an extra div so your DOM isn't as clean.

* It requires more code.

Devshop

About Us

Devshop is a highly motivated group of entrepreneurs, developers, and designers that aim to work with companies that are looking for an edge. Each member of our team brings something unique to the table allowing us to cater our services specifically to meet your needs and exceed your expectations.