<分区>
html - css - 如何更改输入占位符的位置
我想将输入占位符放在输入边框上。
我设法改变了颜色，但没有改变位置。
.filter::placeholder {
color: gray;
}<input type="text" class="filter">有办法吗？
最佳答案
你不能通过设置 ::placeholder 的样式来做到这一点，它只支持有限数量的样式:https://css-tricks.com/almanac/selectors/p/placeholder/#article-header-id-4
不过，您可以添加一个 span 来实现类似的效果。
.filter {
position: relative;
width: 195px;
height: 30px;
border-radius: 5px;
outline: none;
padding: 5px;
border: 1px solid lightblue;
}
.placeholder {
position: absolute;
left: 20px;
top: 0px;
background-color: white;
padding: 0 20px;
}
.filter:focus ~ .placeholder,
.filter:valid ~ .placeholder {
display: none;
}<input required type="text" class="filter" />
<span class="placeholder">First Name..</span>关于html - css - 如何更改输入占位符的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48260921/