Как отрисовать данный input?

Question

[Genri_Rus]

Вот пример:



При фокусе отрисовать обводку, но как сделать там такой отступ (пустое место)

Answer 1

[origami1024]

1) Инпут во враппер
2) на враппер :before с текстом и transparent фоном
3) еще :after - чтобы точечно закрыть часть бордера

Comments

[Genri_Rus]

Border добавлен, как вы представляете это реализовать с помощью :before ?

[origami1024]

Генри, ты так хотел или нет?

[Genri_Rus]

Спасибо большое!

[Владислав]

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

[Genri_Rus]

origami1024, а если имя между серым и белым фоном ?

То это градиентом нужно ?

[origami1024]

у меня на главном мониторе не видно, что там серый, лол, подправил

[Genri_Rus]

origami1024, имя должно быть между серым и белым, а не полностью серым

[origami1024]

Genri_Rus, вот обновил, пришлось впутывать еще и after)

[Genri_Rus]

origami1024, спасибо )

[Genri_Rus]

origami1024, а без after и before не получится ?

[origami1024]

Genri_Rus, можно отдельным элементом сделать, как в другом ответе. After и before чем-то не подходят?

[Genri_Rus]

origami1024, так не работает: https://jsfiddle.net/Genri_Rus/reL90dvt/

[origami1024]

Genri_Rus, А что ты пытаешься изменить?

[Genri_Rus]

origami1024, я просто класс border-input__label выше поднял

[origami1024]

Genri_Rus, у тебя не работает потому что у него там препроцессор scss

[Genri_Rus]

origami1024, проблема в этой строчке:

&:focus{
      border: 1px solid #add8e6;
      & ~ .border-input__label {
        background-image: linear-gradient(to right, #fff, #fff);
      }

Я поменял местами и теперь вместо знака ~, что нужно использовать ?

[origami1024]

Genri_Rus, кинь ссылку текущую

[Genri_Rus]

origami1024, моя вот: https://jsfiddle.net/Genri_Rus/reL90dvt/

[Genri_Rus]

origami1024, вот https://jsfiddle.net/Genri_Rus/reL90dvt/

[origami1024]

Genri_Rus, в css нельзя выбрать предыдущего родственника, если ты не хочешь менять порядок, то надо жаваскриптом такое делать :(

P. S. у тебя там css стоит, выбери scss 'language' сверху кода css

[Genri_Rus]

origami1024, сделал, а пример на js покажите ?

[origami1024]

Genri_Rus, ну там долго возиться, с after и before элегантней, чем на javascript, почему не подходит?

[Genri_Rus]

origami1024, да у меня при клике label как раз таки в ту область должен двигаться

А у вас по-умолчанию он там

[origami1024]

Genri_Rus, https://jsfiddle.net/pmyvo4qu/3/ вот с жаваскриптом

[origami1024]

Genri_Rus, ну ты бы обьяснил, где лабел должен быть сначала и куда двигаться, может и через before after можно сделать

[Genri_Rus]

origami1024, ладно, спасибо что скинули пример

Попытаюсь разобраться

[origami1024]

Genri_Rus, Лучший вариант, чтобы двигалось походу тот, что дал mooncake, только порядок label и input не меняй местами в разметке

[Genri_Rus]

origami1024, ясно, буду экспериментировать )

Answer 2

[Владислав]

я бы наверное сделал как-то так,
закрашивал был бэкграундом лейбла часть границы при фокусе инпута

https://jsfiddle.net/mcake/avLbyu23/

Comments

[Genri_Rus]

Неплохой вариант, но только мне нужно при фокусе еще эффект label добавить

[Genri_Rus]

А если у меня label выше идет: https://jsfiddle.net/Genri_Rus/reL90dvt/

То тогда как ?

Answer 3

[Александр]

Для задания отступа внутри input требуется свойство padding для тэга

input {
    padding: 10px;
}

Пример чего-то подобного

Comments

[Genri_Rus]

Мне понятно как сделать при фокусе, чтобы label вверх поднимался

Непонятно как реализовать такой border ?