Input width defined at css level and at the element level
<style>
input[type="text"]
{
width: 200px;
border: 1px solid #CCC;
}
</s开发者_运维问答tyle>
<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.
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" />
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;
}
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.
加载中,请稍侯......
精彩评论