Возможно ли иметь 2 разных размера шрифта в одном вводе в CSS?Возможно ли иметь 2 разных размера шрифта в одном вложенном месте в css?
что-то вроде этой конструкции: 
В обычном HTML вы можете сделать это с пролетом,: перед тем, &: после и т.д.
но на входе вы не можете сделать все эти вещи, так что я хочу чтобы понять, если его можно ...
благодаря
чтобы применить различные стили в одном заполнителе не представляется возможным.
Однако вы можете использовать псевдоэлементы или div, которые ведут себя как заполнитель и скрывают/показывают его, когда ввод фокусируется.
Это может помочь:
$("#input").keyup(function() {
if ($(this).val().length) {
$(this).next('.placeholder').hide();
} else {
$(this).next('.placeholder').show();
}
});
$(".placeholder").click(function() {
$(this).prev().focus();
});.placeholder {
position: absolute;
margin: 7px 8px;
color: #A3A3A3;
cursor: auto;
font-size: 14px;
top: 7px;
}
.small {
font-size: 10px;
}
input {
padding: 5px;
font-size: 11pt;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />
<div class="placeholder">Email <span class="small">address</span>
</div>спасибо, @nashcheez - это отличная идея, и я уверен, что буду использовать ее в других случаях - но здесь я использую какой-то конструктор форм WordPress, поэтому я не могу использовать этот HTML-код - только реальный входной заполнитель –
@ErezLieberman I извините, но я предполагаю, что изменение заполнителя так, как вы хотите, изначально невозможно. – nashcheez
CSS только решение
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
opacity: 1;
display: none;
}
.input-field > input[type=text]:placeholder-shown + label {
display: block;
}
.input-field > label > span {
letter-spacing: -2px;
}
.first-letter {
color: red;
font-size:100%;
}
.second-letter {
color: blue;
font-size:50%;
}
.third-letter {
color: orange;
font-size:75%;
}
.fourth-letter {
color: green;
font-size:100%;
}
.fifth-letter {
color: yellow;
font-size:25%;
}<div class="input-field">
<input id="input-text-field" type="text" placeholder=" "></input>
<label for="input-text-field">
<span class="first-letter">H</span>
<span class="second-letter">E</span>
<span class="third-letter">L</span>
<span class="fourth-letter">L</span>
<span class="fifth-letter">O</span>
</label>
</div>JS решение
addListenerMulti(document.getElementById('input-text-field'), 'focus keyup', blurme);
function blurme(e) {
var element = e.currentTarget;
element.classList[(element.value.length !== 0) ? "add" : "remove"]('hide-placeholder');
}
function addListenerMulti(el, s, fn) {
s.split(" ").forEach(function(e) {
return el.addEventListener(e, fn, false)
});
}.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
}
.hide-placeholder + label {
display: none;
}
.input-field > label > span {
letter-spacing: -2px;
}
.first-letter {
color: red;
font-size:100%;
}
.second-letter {
color: blue;
font-size:100%;
}
.third-letter {
color: orange;
font-size:100%;
}
.fourth-letter {
color: green;
font-size:50%;
}
.fifth-letter {
color: black;
font-size:50%;
}<div class="input-field">
<input id="input-text-field" type="text">
<label for="input-text-field">
<span class="first-letter">H</span>
<span class="second-letter">E</span>
<span class="third-letter">L</span>
<span class="fourth-letter">L</span>
<span class="fifth-letter">O</span>
</label>
</div>спасибо, @dream hunter - здесь я использую какой-то конструктор форм WordPress - так что я не могу использовать этот HTML-код - только реальный вводщик –
ли эта помощь? http://stackoverflow.com/a/22416088/5561605 – sol
спасибо @ovokuro, но я боюсь, что это не решение в этом случае, потому что я использую какой-то конструктор форм WordPress - поэтому я не могу использовать этот HTML-код - только real input placeholder –
Я думаю, что вы хотите нелегко. В идеале вы могли бы использовать :: - webkit-input-placeholder :: after {content: "TEXT"; font-size: «20px»;} - но я не думаю, что псевдоэлемент будет работать на placeholder в большинстве браузеров. – sol