CODEWITHSUNDEEP
htmlformscssfield
meintrouble
meintrouble

Reputation: 11

Is it possible to put a label inside a form field?

I'm going to put an image so you could see what I had in mind. This is not like placeholders that are present, unless some text is put inside the box.

The label doesn't go away when inputting new info.

a sample form field design, i don't know if this can be translated to code

Upvotes: 0

Views: 114

Answers (1)

Ilya
Ilya

Reputation: 326

Here's sample how you can do it

.input-with-label {
  display: inline-block;
  position: relative;
  width: 200px;
}

.input-with-label input {
  padding: 20px 5px 5px 5px;
}

.input-with-label .lbl {
  position: absolute;
  left: 5px;
  top: 5px;
  font-size: 12px;
  opacity: 0.5;
}


<span class="input-with-label">
 <input type="text" />
 <span class="lbl">Contracted Authorites</span>
</span>

http://plnkr.co/xr6uF8EaJwWRL9GN0t1d

Upvotes: 2

Related Questions