Заполнитель поля ввода стиля с CSS

edwardsmarkf спросил: 12 мая 2018 в 05:10 в: javascript

Возможно ли иметь HTML-эффекты в атрибуте placeholder input? Например, может ли быть следующий вывод заполнителя поля ввода?

normal жирный

Заполнитель может быть настроен используя CSS с ::placeholder, но он применяется ко всему тексту внутри него. Как настроить его так же, как HTML?

zero298 ответил: 12 мая 2018 в 05:12

Что вы подразумеваете под "заполнителем"?

Divneet ответил: 12 мая 2018 в 05:14

Если вы охватите его хорошо, вы сможете легко достичь этого. Если бы вы могли предоставить демоверсию, я был бы рад продемонстрировать.

Stephen P ответил: 12 мая 2018 в 05:39

@ zero298 - как <input type="text" name="city" placeholder="Enter your city"> См. документы

edwardsmarkf ответил: 12 мая 2018 в 10:54

placeholder - like < input type = 'text' placeholder = 'мое поле имени' > - но имеют фразу "имя-фамилия" полужирный или другой цвет, шрифт и т. д.

1 ответ

mehulmpt ответил: 12 мая 2018 в 05:20

Я думаю, вы можете создать эффект "заполнителя", чтобы делать то, что вы хотите сделать. Пример:

.inputBox {
  position: relative;
  display: inline-block;
}

.placeholder {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
}

.inputBox input:focus+.placeholder {
  display: none;
}

.inputBox input:valid+.placeholder {
  display: none;
}

<div class="inputBox">
  <input type="text" required />
  <div class="placeholder"><span style="font-weight: bold">Bold</span> <span>Text</span><!-- your html here --></div>
</div>

Banzay ответил: 12 мая 2018 в 05:24

Круто! потрясающий трюк

edwardsmarkf ответил: 12 мая 2018 в 10:56

хорошо, это довольно умно! Я думал, ты собираешься рассказать мне что-то вроде "Подождите шесть месяцев для html 6".