CODEWITHSUNDEEP
htmlcss
No Reply
No Reply

Reputation: 134

Placing an input-field in a label, changing bgcolor on focus

So what I'm trying to do, is to put an input-field over a label and change the background-color of the input-field on focus. So that the bgColor covers the text of the label.

Here is what it looks like:

<div class="d-faq-field">
  <label class="i-faq-lastname-label" for="i-faq-lastname">Nachname</label>
  <input id="i-faq-lastname" type="text" name="lastname">
</div>

I've put both input field and label in a div so that everythings responsive and the div's can float beside each other.

Also, have a look at the jsFiddle. There is a div on the top where it already works but I cannot seem to reconstruct it properly.

Upvotes: 0

Views: 77

Answers (2)

Cana
Cana

Reputation: 2204

I don't know if I understood, but why not use the placeholder attribute?

<textarea id="i-question2" required="required" type="search" name="question" placeholder="Gib hier deine Frage ein"></textarea>

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

if I well understood try simply

input:focus {
   position: relative;
   z-index: 1;    
}

so, when the input is focused it will cover the label. Anyway you will see the label again when the input loses its focus.

Probably you could obtain the right behaviour simply using the placeholder attribute

Upvotes: 1

Related Questions