Ширина ввода, определенная на уровне css и уровне элемента
<style>
input[type="text"]
{
width: 200px;
border: 1px solid #CCC;
}
</style>
<body>
<input type="text" name="test" value="test" size="5" />
</body>
Когда это просматривается в браузере (Firefox 5), "размер" появляется как фиксированный 200px. Кажется, что размер, указанный мной, полностью игнорируется.
Это из проекта MVC, и это стиль CSS по умолчанию, который поставляется с ним. На данный момент я снял ширину: 200 пикселей. Но есть ли способ сохранить его там и переопределить его на уровне "ввода"?
Я также пробовал
<input type="text" name="test" value="test" width="50px" />
Он не переопределялся вообще.
Ответы
Ответ 1
Если вы хотите переопределить ширину CSS на уровне элемента, попробуйте применить тег стиля непосредственно к элементу:
<input type="text" name="test" value="test" style="width: 50px;" />
Это работает для меня:
<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>
Отредактировано для добавления:
Да, смешение HTML w/CSS считается no-no, поэтому правильным решением было бы извлечь его в класс в конце:
.my_text_box {
width: 50px;
}
Тогда:
<input type="text" name="test" value="test" class="my_text_box" />
Ответ 2
Не устанавливайте стиль стиля в HTML.
Использование:
<input class="narrowInput" type="text" name="test" value="test" />
Или:
<input id="narrowInput" type="text" name="test" value="test" />
Только не используйте "узкий вход". Используйте имя, имеющее бизнес-смысл, то есть: тот, который описывает назначение входных данных.
Затем CSS:
input.narrowInput
{
width: 50px;
}
Или:
#narrowInput
{
width: 50px;
}
Ответ 3
Удалите
input[type="text"]
{
width: 200px; //THIS
}
или
<input type="text" name="test" value="test" size="5" <--//THIS />
Выберите стиль, используя тот или иной.