VDS за 300р от нашего партнера SpaceWeb

ufo51 [76]

19 Дек 2012, 12:13

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

css html

Привет!

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

28 просмотров

Комментарии (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

[ все метки ]

Лучшее

GM2mars [2]

03 Июн 2014, 17:19

Большой сборник интернет сайтов по веб-разработке и не только

[просмотров 27199]

tetro [52]

16 Окт 2011, 15:38

Вывести все элементы POST

[просмотров 18366]

rediska [65]

20 Дек 2011, 15:53

Удалить пробелы в начале и конце строки и переход на новую строку

[просмотров 18244]

gollem [74]

31 мая 2011, 11:48

Python проверка существования переменной

[просмотров 11973]

fullzilla [100]

19 Дек 2014, 16:16

User-agent для Internet Explorer 11

[просмотров 11968]

jaga [125]

24 Окт 2018, 15:59

React Native и React.js — что и как, в чем разница, где применять

[просмотров 11291]

laborant [4]

10 Окт 2018, 15:33

Как запретить просмотр сайта по IP?

[просмотров 9661]

jaga [125]

21 Июл 2011, 14:04

Python Imaging Library (PIL)

[просмотров 9016]

grom [315]

11 Авг 2011, 00:21

Спецификация HTML5 от W3C

[просмотров 7400]

grom [315]

16 Июл 2011, 20:03

Python работа с MySQL

[просмотров 5840]

Вести с Хабра

19.04.2021 - 19:33

Насколько экологична атомная энергетика? На самом деле так же, как солнечная и ветровая

Европа стремится сократить выбросы парниковых газов и стать углеродно-нейтральной к 2050 году. Но вопрос о том как лучше достичь этой цели вызывает серьезные споры. В конце марта выш ...

19.04.2021 - 14:49

Wrike переходит с Dart на новый стек. Какой?

...

19.04.2021 - 14:01

Подстава века или таинственная история взлома Ситибанка

...

19.04.2021 - 13:45

Марсолет Ingenuity полетел: прямое включение трансляции НАСА (обновляется)

...

19.04.2021 - 12:42

Как не потеряться в отечественных изданиях «Искусства схемотехники»

Так сложилось, что количество русскоязычных изданий книги "Искусство схемотехники" почти вдвое больше оригинальных. И это очень сильно запутывает. Особенно, когда дело касается со ...