Как сверстать такой блок одним инпутом?

Question

[Sergey750il]

Доброго времени суток. Можно ли сверстать такой блок одним инпутом?

Comments

[Алексей Уколов]

Раскройте свою мысль про "один инпут". Например, инпуту нужен label, в который как раз пойдёт "Ккал". Вы хотите зачем-то сломать семантику или использование label допустимо?

[Sergey750il]

Алексей Уколов, Нужен label, но в самом инпуте визуально

[Ankhena]

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

Можно:
<input type="text">
;)

И применить к тексту линейный градиент.

А если серьезно, то нужно нормально описать задачу, почему только один инпут и что вообще происходит на самом деле.

[Sergey750il]

Ankhena, А как бы вы сверстали такой блок не одним инпутом?

[Ankhena]

Sergey750il, Начала бы с того, что посмотрела бы на весь блок целиком, в том числе и при адаптиве.

input без label - в любом случае плохо для доступности. Поэтому оставлять его голым и одиноким не стоит.
Посмотрев на всю форму целиком, можно было бы понять, эти "Ккал, %" это лейбл или нет. Ну и дальше по обстоятельствам.

[Sergey750il]

Ankhena, вот набросал, так наверное понятнее

[Алексей Уколов]

Что там в label тогда, если требуется ещё какой-то текст, который не должен исчезат при вводе?

[Sergey750il]

Алексей Уколов, "Обед", а в неисчезаемом плейсхолдере калорийность.

[Алексей Уколов]

https://jsfiddle.net/alexey_m_ukolov/ed8j6k0w/8/
Вот такой вариант вас чем не устраивает?

[Sergey750il]

Алексей Уколов, Все, получилось. Только передал label на span. Не могу решением здесь ответить ваш ответ что то...

[Алексей Уколов]

Тогда ответ - нет, одним инпутом данную задачу не решить. Сделать "неисчезающий плейсхолдер" возможно только при использовании других элементов, а псевдоконтента у инпута быть не может, так что придётся добавлять span.

[Ankhena]

Sergey750il,

Только передал label на span.

Ну и зря.
Или оберните всё в label вместо div.

[Алексей Уколов]

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

div
  > label
    > Обед
    > span.visually-hidden Ккал
  > input
  > span.sr-hidden Ккал

[Ankhena]

Алексей Уколов,
ну в принципе, да, шило на мыло.
Но я бы, наверное, постаралась не дублировать Ккал.

<label for="kkal">
  Обед
  <span>
    <span>Ккал, %</span> 
    <input type="text" id="kkal" placeholder="">
  </span>
</label>

или

<label for="kkal">
  Обед
  <span>
    Ккал, %
    <input type="text" id="kkal" placeholder="">
  </span>
</label>

Answer 1

[Алексей Уколов]

Ответ - нет, одним инпутом данную задачу не решить. Сделать "неисчезающий плейсхолдер" возможно только при использовании других элементов, а псевдоконтента у инпута быть не может, так что придётся добавлять span.

https://jsfiddle.net/alexey_m_ukolov/ed8j6k0w/8/