Add a padding to placeholder when label also inside input

user_13308178 0
Viewed 306

I have an input with label inside. I need to increase padding from label to placeholder (difference maybe 3 or 5 px). What should I do?

I've already tried adding padding-bottom to label placeholder and also padding-top to placeholder. It didn't work. Maybe because of the positioning of blocks.

If you knew how to solve this problem, I'd like to see.

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

placeholder padding css html
1 Answers

The placeholder text will always sit in the center within an input. To achieve more spacing between the label and the placeholder text, what you would need to do is that you add a padding-top value which is greater than padding-bottom of your input. I have set 20px and 10px respectively which would effectively increase the spacing b/w label and placeholder by 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>

user_18878540
Related