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


Tags: jquery,css,jquery-selectors,cross-browser,css-selectors

Problem :

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 :

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{}

    CSS Howto..

    CSS, borders: How do I prevent a border added to a table cell from displacing neighboring cells?
    I think you'll either need to size all non border cells wider and higher by the width of the line around it. or you given them all borders and set...
    Read more

    How to fix width of DIV that contains floated elements?

    How to reset a jquery function on-the-fly

    Showing a large amount of HTML alternative content with swfobject & swffit flash site

    How To Slide One Image Out From Behind Another On Hover?

    How to not inherit width in css?

    HTML/CSS - How do I fill background of region to left of div that shrinks on zoom out?

    jQuery hover/hide/show - not all the text will disappear correctly when mousing over multiple images

    how to overwrite css height set by jquery/javascript?

    CSS Horizontal Menu is showing list bullets

    how to make the entire form (input and submit button) change border color on focus (bootstrap 3)

    How to fix an image to the bottom right with resizing window?

    When using WebFont loader, how to hardcode the css?

    CSS (or jQuery): How to set horizontal scrollbar in the middle position?

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    How to show/hide big image by clicking on thumbnails?

    How to get background image from internal css using xpath?

    How to specify a flex item to be of certain minimum width?

    How to create Two Columns with Separate Scrollbars in Responsive Bootstrap?

    element doesn't show padding in Opera, Safari, IE

    How to not display common border between two adjacent divs?

    How to manipulate SVG element style with javascript?

    How do I deal with the issue of my divs being distorted greatly when zoomed in?

    How to implement CSS file style on selected div

    Bootstrap: how to clear images in a gallery?

    How to prevent javascript and css messing up?

    how can i center the footer text in the bottom of the page regardless of screen size

    How can I create this shape in CSS? [closed]

    Ionic: how to use cssClass in $ionicPopup?

    How to attach a div to a particular dimension in html

    when content it is dynamic?
    How to make a scroll customization for mobile application?
    How to Fade In Background on Page Load - jQuery
    Why doesn't this site have a Google logo for their use of Google Maps? I want to do this. How? [closed]
    CSS - How to prevent the DIV without content from shrinking
    How to implement fluid font size using pure CSS