CSS-如何更改输入占位符的位置 [英] css - how to change position of input placeholder

问题描述

我想在输入边框上放置输入占位符.

I want to put input placeholder on input border.

我设法改变了颜色，但没有改变位置.

I manage to change color but not location.

.filter::placeholder {
   color: gray;
}

<input type="text" class="filter">

有办法吗?

推荐答案

您无法通过设置::placeholder的样式来做到这一点，它仅支持有限的几种样式:

You can't do this by styling the ::placeholder, it only supports a limited number of styles: https://css-tricks.com/almanac/selectors/p/placeholder/#article-header-id-4

您可以添加span来达到类似的效果.

You can add a span that achieves a similar effect however.

.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>

这篇关于CSS-如何更改输入占位符的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！