Как я могу сделать такой же textarea или input?

Question

[Jedi]

Как я могу создать такой же textarea (или input) ?



На поле ввода есть две иконки... Но судя по inspect element, тут не все так просто...

Как я могу сделать точно такую же?

Comments

[Rustam Bainazarov]

Общая обертка с относительным позиционированием, внутри обёртки — input и три блока на абсолютном позиционировании. У input'a padding-right на совместную ширину трёх блоков-иконок + доп. пиксели.

Answer 1

[Stalker_RED]

Иконки можно абсолюно спозиционировать, или сделать им враппер и прижать вправо-вверх.
почему div contenteditable а не input? Потому что если вы хотите вводить несколько строк, вставлять смайлики, гифки, подсвечивать ссылки, и всякое такое, то это невозможно с инпутом, зато вполне работает с contenteditable.

Answer 2

[KononovD]

но там же три иконки ?_? скрепка, фотик и смайлик...

что бы сделать как на картинке - создаем какой-то враппер
в него закидываем инпут и наши иконки, наверное, тоже инпуты(скрепка, по крайней мере - точно инпут, а фотик и смайлик - кнопки, наверное)
у враппера задаем позишн релатив, дисплей флекс и align-items:center, а этим 3м элементам - позишн абсолют
и каждому из них надо задать какой-то right

еще вариавнт сделать 1 враппер с позишн релатив, дисплей флекс и алаин итемс центер
в этот враппер положить инпут и див.
див будет дисплей флекс и позишн абсолют
внутри дива будут эти 3 элемента со своими стилями

2й вариант даже проще будет(при адаптиве надо будет позиционировать 1 элемент, а не 3)

p.s. это всего лишь вариант решения сонного и неопытного верстальщика, не принимайте близко к сердцу)))

Comments

[Одиночка Айс]

зачем... там... флексы???

[KononovD]

Одиночка Айс, ровнять по высоте элементы
когда верстал - замечал, что align-items ровняет даже position:absolute элементы