Home/ Questions/Q 6222967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T08:24:29+00:00

<style> input[type=text] { width: 200px; border: 1px solid #CCC; } </style> <body> <input type=text

  • 0
<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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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" />
    • 0