Input width defined at css level and at the element level

Question

<style>

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

</style>
<body>

<input type="text" name="test" value="test" size="5" />
</body>

When this is viewed on browser (Firefox 5), the "size" it appears is a fixed 200px. It seems the size I specified is completely ignored.

This is from a MVC project, and that is the default style css that comes with it. For the time being, I took off the width: 200px. But is there a way to keep it there, and override it at the "input" level?

I also tried

<input type="text" name="test" value="test" width="50px" />

It did not override at all.

Evan · Accepted Answer · 2011-08-07 00:23:49Z

21

If you want to override the CSS width at the element level, try applying the style tag to the element directly:

<input type="text" name="test" value="test" style="width: 50px;" />

This works for me:

<html>
   <style>

      input[type="text"] 
      {
         width: 200px;
         border: 1px solid #CCC;
      }
</style>
<body>
      <input type="text" name="test" value="test" style="width: 50px;" />
</body>
</html>

Edited to Add:

Yes, mixing HTML w/CSS is considered a no-no, so the proper solution would be to extract it out to a class in the end:

.my_text_box {
    width: 50px;
 }

Then:

<input type="text" name="test" value="test" class="my_text_box" />

edited Aug 7, 2011 at 0:23

answered Aug 7, 2011 at 0:07

Evan

1,7371 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brock Adams · Accepted Answer · 2011-08-07 00:20:58Z

3

Don't set display style in the HTML.

Use:

<input class="narrowInput" type="text" name="test" value="test" />

Or:

<input id="narrowInput" type="text" name="test" value="test" />

Only don't use "narrowInput". Use a name that has a business meaning, that is: one that describes the purpose of the input data.

Then the CSS is:

input.narrowInput
{
    width: 50px;
}

Or:

#narrowInput
{
    width: 50px;
}

answered Aug 7, 2011 at 0:20

Brock Adams

94k23 gold badges242 silver badges312 bronze badges

Comments

Jason Gennaro · Accepted Answer · 2011-08-07 00:14:38Z

0

Remove either

input[type="text"] 
{
    width: 200px; //THIS
}

or

<input type="text" name="test" value="test" size="5" <--//THIS />

Choose to style using one or the other.

answered Aug 7, 2011 at 0:14

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Collectives™ on Stack Overflow

Input width defined at css level and at the element level

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related