在CSS中的一个输入占位符中可以有2种不同的字体大小吗?在一个输入占位符在CSS中可能有2种不同的字体大小?
以普通的HTML你可以用跨度撑得:之前,&:以后等
但在输入你不能让这一切的东西,所以我想了解其是否可能...
谢谢
在CSS中的一个输入占位符中可以有2种不同的字体大小吗?在一个输入占位符在CSS中可能有2种不同的字体大小?
以普通的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猎人 - 这里我使用一些WordPress表单生成器 - 所以我不能使用这个HTML - 只有一个真正的输入占位符 –
这是否帮助? http://stackoverflow.com/a/22416088/5561605 – sol
谢谢@ovokuro,但我恐怕这不是在这种情况下的解决方案,因为我使用一些WordPress的表单生成器 - 所以我不能使用这个HTML - 只有一个实际输入占位符 –
我认为你想要的东西并不容易。理想情况下,你可以使用:: - webkit-input-placeholder :: after {content:“TEXT”; font-size:“20px”;} - 但我不认为伪元素可以在大多数浏览器上占位符 – sol