CSS的一个输入占位符中可以有2种不同的字体大小吗? [英] It is possible to have 2 different font sizes in one input placeholder in css?
本文介绍了CSS的一个输入占位符中可以有2种不同的字体大小吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在CSS的一个输入占位符中是否可以有2种不同的字体大小?
Is it possible to have 2 different font sizes in one input placeholder in CSS?
类似这样的设计:
在常规html中,可以使用span,:before和&:after等.
In regular html you can make it with span,:before,&:after and etc.
但是在输入中您不能做所有这些事情,所以我想了解是否有可能...
but in input you cant make all this things so i want to understand if its possible...
谢谢
推荐答案
无法在同一占位符中应用不同的样式.
To apply different styles in the same placeholder is not possible.
但是,您可以使用伪元素或div充当占位符,并在输入聚焦时隐藏/显示它.
What you can do however is either use pseudo elements or a div which behaves as a placeholder and hide/show it when the input is focussed.
这可能会有所帮助:
$("#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>
这篇关于CSS的一个输入占位符中可以有2种不同的字体大小吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文