CSS: defining styles for input elements inside a div

Question

I have a div called "divContainer", inside which I have few input elements such as text fields, radio buttons, etc. How can I define a style for CSS? I want to mention styles for elements inside this purticular div.not for the whole form.

Example: for text fields, I need a width of 150 pixels; For a radio button, I need a width of 20px;

Answer 1

You can define style rules that apply only to certain elements inside your div with the divContainer as follows:

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

Answer 2

CSS 3

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

CSS2 add class “text” to text inputs and then to your css

 .divContainer.text{ width:150px; } 

Answer 3

When you say “called,” I'm going to assume that you mean the identifier.

To make this a crossbrowser, I would not suggest using CSS3 [] , although this is an option. In addition, each of your text fields provides a class of type "tb" and a radio button "rb".

Then:

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

This assumes that you are using the same classes elsewhere; if not, this will be enough:

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

As @David mentioned, to access something inside the section itself:

 #divContainer [element] { ... } 

Where [element] is any HTML element that you need.

Answer 4

Like this.

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