Невозможно установить ширину textarea с помощью CSS

Я попытался использовать этот CSS для установки ширины моих элементов формы:

input[type="text"], textarea { width:250px; }

Если вы посмотрите на этот скриншот Firefox, вы увидите, что поля имеют одинаковую ширину. Я получаю аналогичный эффект в Safari.

alt text http://screamingv.com/ss.png

Есть ли способы обхода?

ОБНОВЛЕНИЕ: Спасибо за информацию до сих пор. Я теперь убедился, что наложение/край/граница на обоих элементах одинаковы. У меня все еще была проблема. Исходный CSS, который я опубликовал, был упрощен... Я также установил высоту текстового поля на 200 пикселей. Когда я удаляю стиль стиля, ширина соответствует. Weird. Это не имеет смысла.

Ошибка браузера?

Ответы

Ответ 1

Попробуйте удалить отступы и границы. Или попробуйте сделать их одинаковыми для обоих элементов.

input[type="text"],
textarea {
    width:250px;
    padding: 3px;
    border: none;
    }

Или:

input[type="text"],
textarea {
    width:250px;
    padding: 0;
    border: 1px solid #ccc;
    }

Элементы INPUT и TEXTAREA часто имеют некоторые дополнения, применяемые браузером (зависит от браузера), и это может сделать вещи более эффективными, чем назначенная ширина.

UPDATE: также box-sizing: border-box; - это удобный способ установить ширину, в которую будут добавляться дополнение и граница, а не добавлять. См.: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Ответ 2

Этот ответ задерживается на три года, но я отправляю его здесь на всякий случай, если кто-то пытается установить ширину в em's, а не pixels и наткнулся на эту запись (как я и сделал). Убедитесь, что размер шрифта одинаков,

например.

input, textarea {
    font-size:12px; 
    width:20em; 
    padding:0; 
    margin:0 
}

иначе текстовое поле может быть другого размера (true на FF12).

Ответ 3

Попробуйте border: 0; или границы: 1px solid # 000;

Ответ 4

Вероятно, это связано с различными значениями по умолчанию для элементов <input> и <textarea>. Попробуйте использовать что-то вроде этого.

input[type="text"], textarea { 
    padding: 0;
    margin: 0;
    width:250px; 
}

Ответ 5

Я тоже боролся с этой проблемой, и этот вопрос был первым результатом моего поиска. Для меня наконец-то было задано box-sizing: content-box для текстового поля. Drupal 7 по умолчанию имеет значение border-box, что приводит к вычитанию ширины прокладки и ширины рамки из размера текстового поля.

Ответ 6

Возможно, у вас есть определенный пользовательский css-оверлей, определенный где-то в вашем браузере, потому что я просто его протестировал и работает как ожидалось: http://jsbin.com/exase/edit (Протестировано на окнах. Может быть, у собственных виджета Apple есть некоторые причуды?)

Ответ 7

Установите ширину 100%, а затем используйте max-width:

     textarea { 
          width:100%;
          max-width:250px;
     }

//удаленное поле и добавление, вы можете добавить его, если хотите.