Как установить жирность для введенного текста в input? Не для placeholder, а именно для текста, который впишет пользователь. Placeholder должен быть без изменений в обычном состоянии.
1 ответ
Существует селектор ::placeholder, если устраивает поддержка браузеров.
input {
font-weight: bold;
}
.moo::placeholder {
font-weight: 300;
}
<input class="moo" placeholder="moo" value="moo"><br>
<input class="moo" placeholder="moo">
Или, можно записать мелкий скрипт, переключающий состояние в зависимости от текущего значения:
set_input_bold_typing();
function set_input_bold_typing() {
var inp = document.querySelectorAll(".js-typing-bold");
for( var i = 0; i < inp.length; i++ ) {
if( inp[i].value ) inp[i].style.fontWeight = "bold";
inp[i].addEventListener("input", function() {
this.style.fontWeight = this.value ? "bold" : "300";
});
}
}
<input class="js-typing-bold" placeholder="moo" value="moo"><br>
<input class="js-typing-bold" placeholder="moo">
input { font-weight: 800; }