Double border around an Input field

How to do it with least mark-up

[breezemaster]

I'm styling an input field.

It has a background image for the inner text area and a dark inner border surrounding that and a lighter outer border faking a drop shadow.

Must i wrap the field in an extra div to achieve the outer border, or is there a cleaner way to do this?

Many thanks for any replies.

And Hi..! (first post)

Jim
(Kiwi in Germany)

[swa66]

The least mark up is to use CSS3 box-shadow, although it is supported in Safari and Firefox, it might be changed in the standard.

Live example and code: [css3.info...]

[alt131]

Hi breezemaster,

and welcome to WebmasterWorld ;)

Always worry when people start modifying inputs given the accessibility issues, but this method has less negatives for code semantics and accessibility than other options. Also, do check the background and font colours for readability if the image doesn't display.

• Size the (non-transparent) image to the desired dimensions, then set it on the input as a centred, non-repeating background-image.
  
• Set the background-color of the input to the colour desired for the "dark inner border" and pad the input to the width desired for the "inner border".
  
• Set the input border to the width and colour desired for the "lighter outer border".
  

No extra mark-up and works cross-browser, although you may have to adjust the dimensions (and perhaps size the input) to get a consistent visual result. Sizing the background-image means the design will "break" if users zoom the page, but the damage can be minimised by using relative measurements for all the other dimensions.

[breezemaster]

Thanks for the solution. Nice clever trick I'll keep in mind for the future.

However for this case, I need a more modular technique for all the various widths of fields we'll be having. Therefore I would need a horizontally repeating background inside the field.

A wrapping div works for now.. but yeah.. not the cleanest mark-up in the world.

Thanks anyhow and for the welcome.