Можно ли инпуту добавить псевдо?

Question

[olya_097]

Тоесть есть инпут
В нем плейсходер
И возле текста плейсхолдера картинка небольшая(тоесть она внутри).
Или может по другому нужно

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/wbWKxm так ?

Comments

[olya_097]

Максим Ленский, почти
нужно именно вставить картинку- иконку через сss
не добавляя ничего в html
тоесть без i
а по идее как то через инпут
она будет справа

моем случае нужно вставить ↑

[Максим]

olya_097, посмотри ссылку ещё раз - так ??

[olya_097]

Максим Ленский, да
спасибо!

[olya_097]

Максим Ленский,
а можешь глянуть почему у меня не работает?
https://codepen.io/anon/pen/arZvgd

[olya_097]

Максим Ленский, разобралась

[Максим]

olya_097, https://codepen.io/topicstarter/pen/OYXMJE - классы не верно были написаны

[olya_097]

Максим Ленский, cпасибо

[olya_097]

Максим Ленский, Что подправить, чтобы работало выежание по нажатию на кнопку?
тут не подскажешь, пожалуйста?

[olya_097]

Максим Ленский, извините
а не подскажете как сделать чтобы были друг под другом эти пункты?
и главное чтобы растягивалась под свою длину
а не под самый большой
https://codepen.io/anon/pen/NVMBjP?editors=1100

[Максим]

olya_097, https://codepen.io/topicstarter/pen/joxpGq - так ?

[olya_097]

Максим Ленский, не совсем
нужно как скрине
тоесть ширина зависит от текста

[Максим]

olya_097, проверь ссылку опять

[Максим]

olya_097, так или нет ...???

[olya_097]

Максим Ленский, cпасибо
но вот мой код из проекта немного переделанный
https://codepen.io/anon/pen/oRdMqP

тут я могу также сделать? просто так мне нужно чтобы потом этим блоком управлять
позишин задавать

[Максим]

olya_097, Оленька это вы как хотите ..можно и на тегах параграфа а можно блоками

[olya_097]

Максим Ленский, я не про это
Я про то чтобы также Ширина зависела от текста

[Максим]

olya_097, если делать блок вложенный в блок то тогда можно использовать inline-block и потом позиционирование какое угодно ..

[olya_097]

Максим Ленский, не совсем получается..
https://codepen.io/anon/pen/oRdMqP

[olya_097]

Максим Ленский, поможете? или подскажете в чем суть? пожалуйста

[Максим]

olya_097, https://codepen.io/topicstarter/pen/NVMBmr вот сделал смотри - только class не писал какие у тебя

[olya_097]

Максим Ленский, cупер
огромное спасибо

[olya_097]

Максим Ленский, извини
а не подскажешь как сделать чтобы пункты так переносились? ведь обернуть в два дива особо смысла тут не вижу

[Максим]

olya_097, покажи вёрстку ...по фоткам не гадаю ..надо видеть задачу

[olya_097]

Максим Ленский, https://codepen.io/anon/pen/qGyjvx

вот нужно выстроить как выше
+ бордер радиус у тебя срабатывает у инпута?

[Максим]

olya_097, так ?? https://codepen.io/topicstarter/pen/qGyPBz

[olya_097]

Максим Ленский, ага
а как вариант с column-count?
или не использовал?

[Максим]

olya_097, какой смысл ? если обычный flexbox это делается стандартно

[olya_097]

Максим Ленский, на бордер-радиус смотрел? почему не срабатывает

[Максим]

olya_097, если чуть чуть изменить вёрстку например вот так то всё работает

[olya_097]

Максим Ленский, это да
сппасибо
а если без измениний в разметке? а только стилями?
или тут нельзя так будет?

[Максим]

olya_097, вот чего я добивался : https://codepen.io/topicstarter/pen/qGyxLZ

[olya_097]

Максим Ленский, спасибо
а как исправить для мобильной версии?https://codepen.io/anon/pen/eaLejp
я имею ввиду по клике на каталог не совсем корректно идет отображение меню

[Максим]

olya_097, https://codepen.io/topicstarter/pen/dEqQzv так ??

[olya_097]

Максим Ленский, примерно такое нужно

обрати внимание на бордер

[olya_097]

Максим Ленский, 1 - это как сейчас
2 -как нужно

[Максим]

olya_097, Оля там много переделать надо ..

[olya_097]

Максим Ленский, ок
И возможно добиться как на скрине давая position absolute ul?

[Максим]

olya_097, ну разумеется можно ...можно вообще сделать что угодно ..применяй ::after и ::before в качестве обводки разумеется ...и обязательно с background

[olya_097]

Максим Ленский, ага
Ок
Спасибо

[Максим]

olya_097, Оля вот так смотри : https://codepen.io/topicstarter/pen/joerzd

[olya_097]

Максим Ленский,
не подскажешь почему в две колонки не выстраевается?
как на скрине
https://codepen.io/anon/pen/VJQwwK

[Максим]

olya_097, так не проще ? https://codepen.io/topicstarter/pen/MMQWmM одна строчка в css

[olya_097]

Максим Ленский, спасибо
так проще
но а без этого свойства?
как можно?

[Максим]

olya_097, гридами самое лучшее ...у меня рука сломаная ..писать тяжеловато

[olya_097]

Максим Ленский, а
печально конечно
выздоравливай..

а на флексах можно?

[Максим]

olya_097, можно конечно ...но не щас ...извени

[Максим]

olya_097, https://codepen.io/topicstarter/pen/MMQWmM вот на flex

[olya_097]

Максим Ленский, спасибо

Answer 2

[Владимир Проскурин]

Заверните инпут в div, и добавьте к диву нужный псевдоэлемент.

Comments

[olya_097]

Владимир Проскурин, вроде так и делаю
https://codepen.io/anon/pen/arZvgd

[olya_097]

Владимир Проскурин, разобралась

Answer 3

[Шохрух Шаймардонов]

Вот готовая шпаргалка