адаптивный input с внутренним отступом

136

djdiplomat

24 июля 2016, 15:16

6143

Мне нужно задать текстовому инптуту внутренний отступ, а также сделать его адаптивным, чтобы он занимал ровно 100% ширины блока в котором находится.

Загвоздка в том, что 2 этих условия одновременно выполнить не получается.

Если у input свойство width: 100% то за счет padding 5px - инпут вылезает за границы блока.

Если убираем паддинг, то в блок мы вписываемся нормально, вот только буквы внутри инпута прилипают к границе.

Как быть?

Изменять ширину width: 100% не вариант, т.к. медийные запросы на каждый пиксель не пропишешь, а требуется именно так, чтобы инпут был 100% в диапазоне родительского блока от 100 до 1920px

Z0

827

ziliboba0213

24 июля 2016, 15:31

#1

width: 98%; padding: 1% чем вас не устраивает?

265

temniy

24 июля 2016, 15:39

#2

Например, так -

<div style="width: 100px;">

<input style="width:100%;padding: 5px;max-width: 86px;" value="тестовый текст">

</div>

max-width = ширина контейнера минус 14px

⭐ Лучший хостинг от 4 евро, VPS от 6 евро - разные локации - любые карты - скидки до 20% - https://fornex.com/c/ffi2e3/ru/services/ ⭐

TA

116

TiA

24 июля 2016, 15:41

#3

djdiplomat:
Как быть?

Укажите для тега input стиль:


display: block;
box-sizing: border-box;
width: 100%;
padding: 5px;

2

Профессиональная верстка и разработка сайтов на WordPress (http://www.maultalk.com/topic139110s0.html)

94

Gerga

24 июля 2016, 17:21

#4

djdiplomat, или так:


width: calc( 100% - 10px );
padding: 5px;

:)

В 2023 году Одноклассники пресекли более 9 млн подозрительных входов в учетные записи

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта