CSS:Defining Styles for input elements inside a div

Css

Css Problem Overview


I have a div called "divContainer" inside which i have few input elements like textboxes,radio buttons et.. How can i define the style for then in the CSS ? I wanna mention styles for elements inside this purticular div.not for the entire form.

Ex: For textboxes i need width as 150px; For Radio buttons i need width of 20px;

Css Solutions


Solution 1 - Css

You can define style rules which only apply to specific elements inside your div with id divContainer like this:

#divContainer input { ... }
#divContainer input[type="radio"] { ... }
#divContainer input[type="text"] { ... }
/* etc */

Solution 2 - Css

CSS 3

divContainer input[type="text"] {
    width:150px;
}

CSS2 add a class "text" to the text inputs then in your css

.divContainer.text{
    width:150px;
}

Solution 3 - Css

Like this.

.divContainer input[type="text"] {
  width:150px;
}
.divContainer input[type="radio"] {
  width:20px;
}

Solution 4 - Css

When you say "called" I'm going to assume you mean an ID tag.

To make it cross-brower, I wouldn't suggest using the CSS3 [], although it is an option. This being said, give each of your textboxes a class like "tb" and the radio button "rb".

Then:

#divContainer .tb { width: 150px }
#divContainer .rb { width: 20px }

This assumes you are using the same classes elsewhere, if not, this will suffice:

.tb { width: 150px }
.rb { width: 20px }

As @David mentioned, to access anything within the division itself:

#divContainer [element] { ... }

Where [element] is whatever HTML element you need.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionShyjuView Question on Stackoverflow
Solution 1 - CssDavid UnderhillView Answer on Stackoverflow
Solution 2 - CssµBioView Answer on Stackoverflow
Solution 3 - CssDagg NabbitView Answer on Stackoverflow
Solution 4 - CssKerry JonesView Answer on Stackoverflow