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

Devshop

Adventures With Custom Form Styling

Adventures With Custom Form Styling

Development

Adventures With Custom Form Styling

Posted by: Jared Rader

Monday, Jul 14th, 2014

Styling forms in a web application used to be a pain. It's still kind of a pain, but I'm getting better at it. For our latest project, we were given a mockup of a form that had some custom stylings. Each input was a rectangle with the same height and width.

If you want to customize form inputs like this, your first step should be to set box-sizing to border-box. Unhappily, the form input widths vary. For example, the width of a text field and a select field will be different even if you give both an explicit width.

However, if you specify that your box sizing should be border-box, that will fix this problem. If your form stylings are going to be universal across your site, you can use a universal selector:

*

box-sizing: border-box

Now you can set the height and width of each.

Styling dropdown select elements
It's pretty easy to customize text field inputs, but select inputs have a default border radius applied. We wanted each form element to be consistent, so we need to get rid of the default border radius. We also needed just one custom down arrow rather than the default arrows browsers give us. This requires turning off the browser-specific styles. Here's an example of doing this for Chrome:

select

-webkit-appearance: none
background: $light-gray
height: 35px
border: 0
border-radius: 0
padding: 5px 10px

And here's the styling for the down arrows. I followed a great tutorial from CSS tricks for creating a triangle in CSS.

.select-arrow

position: absolute
top: 33px
right: 10px
border-left: 5px solid transparent
border-right: 5px solid transparent
border-top: 5px solid #000

There's a small problem with this however - because the arrows aren't an actual part of the form, if a user clicks right on the triangle div element, it won't let the select dropdown appear. There are a couple ways you can handle this problem...

Simulating a click on a select element
The first solution I'll talk about is also the most complicated - it involves using JavaScript DOM methods to simulate a click on a select element when clicking another element. I found a code snippet on JSFiddle that accomplishes this:

function open(elem) {

if (document.createEvent) {
var e = document.createEvent("MouseEvents");
e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
elem[0].dispatchEvent(e);
} else if (element.fireEvent) {
elem[0].fireEvent("onmousedown");
}
}

Essentially, this code emulates a user clicking on an element. I can then use this function inside a click event when a user clicks on the arrow:

$(function() {

$('.select-arrow').on('click', function(e) {
e.preventDefault();
open($(this).next().find('.match-select'));
})

Some would argue this is overkill - It's more code and involves using JavaScript DOM methods rather than much simpler jQuery. If you're a hardcore JavaScript ninja, this might be fine for you. But the same effect can be accomplished much easier using CSS and an arrow image. Check out this tutorial for how you could go about it that way.

Styling our button
Buttons are interesting. Each browser has its own specific stylings and you can't always add the stylings you want on top. For example, you can't give a button extra padding without having already changed its background or border styles. It's weird.

For this form, we wanted a larger, square button with a 2 pixel, dark-gray border. The text needed to be blue and centered, and when you hover over it, the cursor needs to change to a pointer (that little gloved hand you've seen in your browser), and the background needs to fade with a slight delay:

input.btn

border: 2px solid $dark-gray
padding: 10px
width: 125px
background: #fff
color: $blue
margin-top: 15px

&:hover
background: $blue
color: #fff
cursor: pointer
-webkit-transition: 0.2s

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.