CODEWITHSUNDEEP
htmlcss
apatik
apatik

Reputation: 383

make a Placeholder not disappear when typing

I've seen on some occasions people having issues with their placeholders not disappearing when they start typing inside the input. That's actually what I want.

On my register form I've got a captcha verification in the shape of " 24 - 3 + 6 = ? "

What I wanted to do is having this calcul not outside the input, but actually inside, and the user's answer would be typed after the calcul ( by setting a padding-left in the input to make the text starts after the calcul ).

Is it possible to get my placeholder to stick even when the user starts typing ?

Others suggestions are welcomed aswell if you have a clean alternative for what I am trying to do.

As always, thanks a lot for your help !

Upvotes: 5

Views: 5722

Answers (1)

Jacob
Jacob

Reputation: 2165

Put the equation and input in a container, then style the container to look like an input and the input to look normal.

.captcha {
  display: inline-block;
  padding: 0.2em;
  background-color: white;
  border: 1px solid #A9A9A9;
}

.placeholder {
  color: #A9A9A9;
}

.answer {
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
}
<div class="captcha">
  <label class="placeholder" for="answer-1">24 - 3 + 6 = </label>
  <input id="answer-1" class="answer" type="number" name="answer-1">
</div>
<div class="captcha">
  <label class="placeholder" for="answer-2">(24 - 3 + 6) * (1579 - 41 + 2) = </label>
  <input id="answer-2" class="answer" type="number" name="answer-2">
</div>

Upvotes: 3

Related Questions