How can I add an extra border of 5 pixels on my controls?

I would like to add an extra bord开发者_运维技巧er (thick) on my controls like here: http://tickspot.com/screenshots/

As we see in this link, the combos list and textbox have a blue tick border.

How can I achieve this without too much effort?

Thank you.

A CSS only solution might be to use both border and outline styles : http://jsfiddle.net/RyJzC/

(But remember outline is used to give an indication that an element has focus so make sure you take this behaviour into account if you do style outline)

Not all form elements properly support css styling. You could probably find some styles that work across the board, but it might take some work.

The easier option to get consistency is to wrap your controls in a <span class='control'></span> The downside to this method is that you have to add extra markup. You could give all the elements on your page class='addBorder' or something similar and then use JavaScript to find them and wrap them. That'd be a very unobtrusive method. Comment if you need help on implementing this and I'd be happy to help.

You may nest your elements and give the outer element the border and the padding. here you'll get an impression: http://jsfiddle.net/jy92c/1/