[IE7 - Known Issues][CSS] CSS border for Select (Drop down) element does not work

| | 1 min read

Many a times, IE7 stands out from the group of modern web-browsers owing to its notorious incompatibility with many a standard HTML/CSS/JS. In this article, we are seeing the following case of incompatibility: CSS border for Select (Drop down) element does not work.

On one of my Drupal sites, while validating a form, when a required input field has not been filled before hitting the Submit button, an error message is shown, and the field is highlighted with a red border. The red border was achieved with this CSS:

.form-item input.error, .form-item textarea.error, .form-item select.error {
    border: 2px solid red;
}

This works fine on all browsers except IE7, as shown in the following images:

On other browsers

Here is what we see on IE7:

On IE7