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

Question

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.

score 1 · Accepted Answer · answered Jun 07 '13 at 09:04

1

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

answered Jun 07 '13 at 09:04

Fabrizio Calderan

120,726
26
164
177

Oh my, now that's ridiculous. I've been trying to fix this for 3 hours. That's exactly what I wanted, thank you! – No Reply Jun 07 '13 at 09:06
Placeholder wouldn't pass the WCAG 2.0 since its contrast wouldn't be high enough and the textcolor for placeholders isn't changeable in every browser yet. – No Reply Jun 07 '13 at 09:10
@NoReply looking at the most-voted answer on http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css it seems it is possible to change the colour on almost all current browser. – Fabrizio Calderan Jun 07 '13 at 09:18
I know, unfortunately the project has to support IE7+ though. – No Reply Jun 07 '13 at 09:25
well, placeholder is not supported until IE10, so whatever polyfill you decide to use for that attribute you will be able to also set the right colour – Fabrizio Calderan Jun 07 '13 at 09:27

score 0 · Answer 2 · answered Jun 07 '13 at 09:09

0

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>

answered Jun 07 '13 at 09:09

Cana

2,204
1
13
12

See my comment for Fabrizio Calderan's answer. – No Reply Jun 07 '13 at 09:11

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

2 Answers2