Displaying colored borders on input elements (form fields) in IE7 and IE8

I'm using the jQuery Validation Engine to validate some form fields. Everything's working well except in IE7 and IE8.

The style sheet has a :focus class, which gives them a blue box-shadow when the form field is focussed on:

input:focus { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #06c !important; -moz-box-shadow: 0px 0px 1px 1px #06c; box-shadow: 0px 0px 1px 1px #06c; }

I'm using jQuery to add a class to the form fields when they're not valid (as defined by the jQuery Validation Engine,) so that those fields can have a red box-shadow:

input.error { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #c00 !important; -moz-box-shadow: 0px 0px 1px 1px #c00; box-shadow: 0px 0px 1px 1px #c00; }

This works great...in IE9, Firefox, and Chrome. It doesn't work in IE8 or 7. (There was a party when we stopped supporting IE6.) I tried installing PIE.htc and adding a style option that indicated a border for those elements, rather than a box-shadow, but that didn't seem to help and it caused some other display weirdness with the error-bubbles, so I removed PIE.htc. Then I tried having a separate style definition, enclosed in IE-conditional tags, that specified borders for those inputs, but still it didn't work. Here's my conditional-CSS:

<!--[if lte IE 8]>
<style type="text/css">
input:focus { border: 1px solid #06c; }
input.error { border: 1px solid #c00; }
</style>
<![endif]-->

...help?

Answers


Not everything is supported in those browsers. Just live with it and find an alternative, like showing an additional message. Or you could embed the input element inside a div:

​div.invalid {
    display: inline-block; 
    border: 1px solid red;
}​

<div class="invalid">
        <input type="text"/>
</div>​​​​​​​​​​​​​​​​​

If you start adding element like this, I would do that though JQuery too, and preferably in a separate piece of code that is included only in IE7 and 8, so you can easily drop it once you don't need it anymore. Or you could choose to always use the div, and just style div.invalid input{...} for other browsers.


Need Your Help

Load a text/javascript into a PHP page

php javascript file-get-contents

I'm trying to load a javascript file into a PHP page and then i can use jquery load to bring that data into my website.

How to determine the order of evaluation of a mathematical expression?

c# java algorithm

Given a mathematical expression, I would like to find out which are the parts that can be evaluated simultaneously. For example, given the following expression,

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.