Menu
<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.
938
The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box , it sets the width of the border area.
The width attribute specifies the width of the <input> element. Note: The width attribute is used only with <input type="image"> . Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.
This can be done by using the size attribute or by width attribute to set the width of an element. The size attribute works with the following input types: text, search, tel, url, email, and password and not on type date, image, time for these we can use width attribute.
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
