Home/ Questions/Q 219065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T18:48:36+00:00

I am creating a form which is validated under jQuery Validation . I want

  • 0

I am creating a form which is validated under jQuery Validation. I want to apply a light-red background colour to inputs which are invalid and need to be corrected.

When I apply background-color: #FFCCCC; to the input, the attractive styling seems to be removed and a hard border replaces it. For example, with a text input in Firefox:

Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
(Live demo)

This occurs with several browsers. It also occurs if I set any background other than #FFFFFF.

Is there a way to preserve styling while applying a background colour?

I am open to Javascript solutions which emulate the style somehow.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sorry – any sort of styling on input elements tends to destroy their OS/browser defaults. The default inputs are rendered in an entirely different way – it’s not like they’re coded into the browser as CSS styles, unfortunately.

    The best thing to do here is, rather than try to make your red-background inputs emulate normal ones, create your own attractive styling! If you like those light borders, use border: 1px #ccc solid. If you like round corners, take advantage of border-radius and -moz-border-radius – for those who are on the edge of browser development, they’ll have ’em. For those who aren’t, they won’t notice the difference.

    In short, don’t try to make the inputs fit in with the OS environment, but rather style them to your own site’s look and feel. This will create better design for your website overall 🙂

    • 0