如何在控件上添加5像素的额外边框？

Question

I would like to add an extra border (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.

Answer 1

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/

Answer 2

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.

Answer 3

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 )