Ширина ввода, определенная на уровне 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 />

Выберите стиль, используя тот или иной.