CODEWITHSUNDEEP
htmlcsstextboxheightwidth
john
john

Reputation: 115

How to Format text boxes with Css

Hello am trying to change the size of 3 text boxes using css.

I want to use something like below, but i figured that would change the format of all text boxes in my page.

 input[type='text']
{
   ...css
}

I want to change the format only in 3 text boxes so how should i do it ? I also tried something like below code but didn't work. I put the class for text box as .commonTextBoxes but not change. Am trying to change the width and height of text box.

 .commonTextBoxes input[type='text']
{
   ...css
}

Upvotes: 2

Views: 1717

Answers (3)

1010
1010

Reputation: 221



You can have a different class for each of the 3 text boxes. I would use this code:

.textBox1 {
...css
}
.textBox2 {
...css
}
.textBox3 {
...css {
}

The code above is too much but there is another way.

If the 3 text boxes had the same class, it would be easier.

If the html code was:

<input type="text" class="myTextBox">
<input type="text" class="myTextBox">
<input type="text" class="myTextBox">

As you see, they all have the same class so the CSS would be;

.myTextBox {
...css
}

Since the 3 textboxes have the class 'myTextBox', the CSS code applies to all the text box in the field with class="myTextBox"

Working example - JSfiddle

Hope this helps!
P.S - You did not say the css code for the input fields so I made up my own.

Upvotes: 1

Mohan Rex
Mohan Rex

Reputation: 1674

Just for further reference. Actually the correct way to specify the class is like as below. There may be some times we need like this where we would have kept same class for both text and textarea... 

input[type=text].text {
    ...css
}

Upvotes: 1

Omer
Omer

Reputation: 1796

John if you gave a class to the text box <input type="text" class="commonTextBoxes"> then you don't have to define:

 .commonTextBoxes input[type='text']
{
   ...css
}

Instead just use the class name:

 .commonTextBoxes
{
   ...css
}

and if you want to apply the CSS to three text boxes then gave them three classes and do something like this:

 .commonTextBoxes1, 
 .commonTextBoxes2, 
 .commonTextBoxes3
{
   ...css
}

Upvotes: 2

Related Questions