Question

将占位符对齐到字段顶部，而输入文本正常显示在中间的正确方法是什么？

有什么方法可以仅在input / :: placeholder上使用CSS做到这一点，还是我应该构建一个active并在其下面的输入字段消失时会消失的包装器？

这是我现在所掌握的东西：https://jsfiddle.net/ejsLfvdn/1/

这就是客户应该看到的样子：

这里不是输入掩码，我只是在将占位符对齐到顶部而苦苦挣扎，而输入应该正常出现在中间。填充输入后，占位符必须消失。

Answer 1

我认为您不能通过直接定位占位符伪类（:: placeholder）来做到这一点。

只能将一小部分CSS属性应用于此元素，并且位置不是其中之一：

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

我认为您将需要采用具有适当范围，输入和位置的包装器方法。

Answer 2

您可以使用类似这样的方法，唯一的问题是输入必须具有必填属性。

* {
  box-sizing: border-box;
}

.input {
  display: flex;
  flex-flow: column-reverse nowrap;
  border: 1px solid gray;
  width: 220px;
}

.input input:valid + label {
  opacity: 0;
}

.input input {
  width: 100%;
  padding: 10px;
  border: none;
}

<div class="input">
  <input required id="username" name="username" type="text" />
  <label for="username">Username</label>
</div>

Answer 3

希望我能达到您的要求。

顺便说一句，我在输入时使用jquery隐藏了占位符，如果该字段为空，则再次显示该占位符。

$('.form-control').keyup(function(){
	var val = $(this).val();

  if(val == ""){
    $('.placeholder').show();
  }else{
    $('.placeholder').hide();
  }
});

.input-cont{
  position: relative;
}
.form-control{
  border: 1px solid #DDD;
  border-radius: 5px;
  height: 40px;
  padding-left: 8px;
}
.placeholder{
  position: absolute;
  top: 5px;
  left: 8px;
  color: #3dc185;
  font-size: 12px;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <form>
      <div class="input-cont">
        <span class="placeholder">Imię</span>
        <input class="form-control" type="text" name="name">
      </div>
    </form>
  </body>
</html>

Answer 4

您可以在占位符上使用translateY(-100%)来向上移动文本，然后在文本框顶部添加一些填充以显示文本：

.placeholder-offset {
  font-size: 20px;
  padding-top: 25px;
}

.placeholder-offset::placeholder {
  color: red;
  transform: translateY(-100%);
}

<input type="text" placeholder="Username" class="placeholder-offset" />

输入字段中的水平对齐占位符

4 个答案: