Растянуть input, textarea на 100%

css html

Привет!

Задался вопросом, как растянуть поля input и textarea на 100% и что бы они не выходили за рамки своего родителя. Ведь если поле имеет padding и border, то эта часть не входит в 100% размера, что очень глупо. Сейчас убрал border и padding и реализую их у элемента контейнера, но это не очень удобно. Кто, что посоветует?

37 просмотров

Комментарии (2)

glottis 20.12.2012 12:46

Примените свойства box-sizing, для элементов формы которые нужно растянуть.

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

nightkon 27.03.2013 14:39

glottis, предложил очень хороший вариант. Минус в том, что IE до 7 версии не поддерживает это свойство, а с остальными браузерами всё отлично. Можно использовать этот вариант и для IE7 и ниже сделать хаки.
Пример: http://jsfiddle.net/nightkon/8nQQa/

Также есть способ - кроссбраузерный.
Пример: http://jsfiddle.net/nightkon/WgUdM/

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Войдите, чтобы написать о чем-нибудь...

Вход Регистрация

Web.onRails

Найди ответ на любой вопрос по Веб-разработке!

задать вопрос...

Вы можете разместить Рекламный пост самостоятельно, либо отправив контент по адресу admin@webonrails.ru→ Оплата здесь ←Неоплаченные посты удаляются.

Метки:

php× 491

css× 225

python× 209

html× 188

flash× 163

mysql× 155

linux× 153

perl× 138

google× 109

dart× 102

[ все метки ]