当标签也在输入内时向占位符添加填充

Question

我有一个带有标签的输入。我需要增加从标签到占位符的填充（差异可能是 3 或 5 像素）。我该怎么办？

我已经尝试将 padding-bottom 添加到标签占位符，并将 padding-top 添加到占位符。它没有用。可能是因为方块的定位。

如果你知道如何解决这个问题，我很想看看。

.form-control {
  width: 320px;  
  font-family: Verdana, sans-serif;
  position: relative;
}

.form-control input {
  display: blocl;
  outline: none;
  width: 100%;
  background: #fff;
  border: 2px solid #fcc;
  padding: 15px;
  font-size: 24px;
  color: #500;
  font-family: inherit;
  cursor: pointer;
}

.form-control label {
  cursor: pointer;
  display: block;
  position: absolute;
  left: 15px;
  top: 18px;
  color: #aaa;
  font-size: 20px;
  -webkit-transition: .2s;
  transition: .2s;
}


.form-control input:valid + label,
.form-control input:focus + label {
  top: 0;
  font-size: 14px;
}

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="form-control">
    <input type="text" id="login" required>
    <label for="login">Login</label>
  </div>
</body>
</html>

Answer 1

占位符文本将始终位于输入框的中央。要在标签和占位符文本之间实现更大的间距，您需要做的是添加一个大于输入的 padding-bottom 的 padding-top 值。我分别设置了 20px 和 10px，这将有效地增加 b/w 标签和占位符的间距 5px。

.form-control {
  width: 320px;  
  font-family: Verdana, sans-serif;
  position: relative;
}

.form-control input {
  display: block;
  outline: none;
  width: 100%;
  background: #fff;
  border: 2px solid #fcc;
  padding: 20px 15px 10px;
  font-size: 24px;
  color: #500;
  font-family: inherit;
  cursor: pointer;
}

.form-control label {
  cursor: pointer;
  display: block;
  position: absolute;
  left: 15px;
  top: 18px;
  color: #aaa;
  font-size: 20px;
  -webkit-transition: .2s;
  transition: .2s;
}


.form-control input:valid + label,
.form-control input:focus + label {
  top: 0;
  font-size: 14px;
}

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="form-control">
    <input type="text" id="login" required>
    <label for="login">Login</label>
  </div>
</body>
</html>

当标签也在输入内时向占位符添加填充

Add a padding to placeholder when label also inside input

html

css

padding

placeholder