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

Question

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

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

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

альтернативный текст http://screamingv.com/ss.png

Есть ли обходные пути?

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

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

Answer 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 браузер часто применяет некоторые отступы (зависит от браузера), и это может сделать вещи более эффективными, чем назначенная ширина.

ОБНОВЛЕНИЕ: также box-sizing: border-box; - это удобный способ установить ширину, в которую будут добавлены отступы и рамки, а не добавлены. Смотри: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

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

, например

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

Answer 8

вы можете использовать:

input[type="text"], textarea { 
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}