How to style just one type of input field without also affecting other input types with CSS


Tags: html,css

Problem :

Is there a way to write style rules that will only influence text fields. Suppose I have the following:

<div id="helloDiv">
<input type="text" name="something" /><br />
<input type="checkbox" name="somethingElse" /><br />
<input type="submit" name="go" />
</div>

div#helloDiv input {
   border: 1px solid red;
}

The problem with the above CSS rule is that it will affect ALL input fields not just input text but also radio buttons, submit buttons, etc.

So is there a cross browser solution to affect just one type of input field within a div or other page element (without resorting to assigning the input fields styles individually).



Solution :

The most tedious but IE6-compatible way to do it is to give all your input type="text" elements some specific CSS class, like class="text", and targeting that class only:

div#helloDiv input.text {
    /* Styles */
}

The simplest, CSS2.1 but IE6-incompatible way is just

div#helloDiv input[type="text"] {
    /* Styles */
}

without modifying your HTML.

Addendum: per animuson's comment, choose either one of these. Decide whether or not you need or want to support IE6, and take the appropriate code.


    CSS Howto..

    How to make CSS float left not bend around when browser width is shrunk

    AngularJS - how to set css class for the custom directive?

    How to fake width animation with CSS transform?

    Bootstrap CSS - How do I keep the search form inline with other navbar elements?

    How to implement a table structure using CSS

    How to properly center steps in bootstrap?

    How can I load dynamically typekit fonts?

    How to reference another selector in css

    How make contents as a grid in a ScrollPanel in GWT project using UIBinder

    How to override active admin CSS?

    How to add a new CSS class to a Link Badge if the value is 0?

    Making dijit.Dialog Transparent when it shows up

    css - how to setup image editing page

    Push vertically resizable Div to bottom of wrapper. How?

    Extra margin showing below element?

    How to style button inputs to be identical in Chrome and Firefox?

    How can I do html multi elements list with type attribute?

    how to change css of the image link when clicked?

    How do I change the colour of 'and one other person like this' when I've added it to my site?

    How to display a child div BEFORE the parent div?

    jquery/css how to rescale and crop a large image to fit my display div?

    How to serve css files in djangos's flatpages?

    How to align center without break the user experience?

    Empty div with 2px width and background color doesnt show with height as 100%

    How to change CSS for a specific page in wordpress?

    Why was ::selection removed from the CSS Selectors spec, and how does its specificity work against type selectors?

    How to give same style to first 2 paragraphs differently in css

    How to delay one transition but not the other?

    How to use fadeIn with css property change jquery

    CSS how to target element beside my current element?