Using jQuery, how to find out if CSS selector "input[type=text]" is natively supported by browser?

Question

In my CSS I have a rule that must be applied to all text fields (using the CSS3 selector input[type=text].

I also use jQuery. Some browsers like Internet Explorer 6 does not support that form for CSS selector. So my workaround is to add an extra classname in CSS:

input[type=text], .workaround_classname{
  /* css styling goes here */
}

And via jQuery then add the CSS class:

$('input[type=text]').addClass('workaround_classname');

The Question is: How do I make sure this rule only is invoked when CSS3 selectors are not natively supported?

Solution 1

I ended up using conditional comments in my javascript file. This way I could address IE6 and apply the CSS class

$(function(){
  //add css class to input[type=text] fields if the selector is not natively supported
    // IE6 hack: Since some CSS selectors are not working, we simulate with class names.
    /*@cc_on@if (@_jscript_version <= 5.6)
    $('input[type=text],input[type=password],input[type=radio],input[type=checkbox]').
        each(function() { $(this).addClass('type_' + this.type); });
    @end@*/

});

This way, I end up with added class names for all form fields:

.type_text{}
.type_radio{}
.type_checkbox{}
.type_password{}

Solution 2

Why not set some useless css style and check if the style was applied. Only add the workaround class to the elements that don't have this style applied.

Only problem is I can't come up with a "useless" style you can use :-)

Solution 3

This seems to incorporate something like you speak of:

http://www.w3avenue.com/2009/07/02/detect-support-for-css3-html5-with-modernizr/

Solution 4

Why not just have

input.workaround_classname{
  /* css styling goes here */
}

then add workaround_classname to all text inputs in your markup.

The selectors you could use are (I think the second is probably the one that would be easiest to understand what it was selecting for someone else reading the code)

$('input:text')
// or
$('input:text.workaround_classname')
// or
$('input.workaround_classname')

Then no detection is needed and you won't be relying on JavaScript to add the class name.

View more solutions