How to color label on focusing input box via CSS?

Question

I want the effect of coloring label on input focus. Like when i focus input box, the label color should change to blue. But this is not working and I want to know why as well as how to fix this?

.test-label{
			color: purple;
}
.test-box:focus .test-label{
			color: blue !important;
}

<form>
		<label class = "test-label">Label</label>
		<br />
		<input type = "text" class = "test-box">
	</form>

two selectors separated by space means they would be nested, but your label and input are not nested. — Steve H.
– Steve H., Commented Oct 12, 2017 at 15:57

sol · Accepted Answer · 2017-10-12 16:01:24Z

2

You can use focus-within for this.

Note it has limited support.

.test-label {
  color: purple;
}

form:focus-within .test-label {
  color: blue;
}

<form>
  <label class="test-label">Label</label>
  <br />
  <input type="text" class="test-box">
</form>

answered Oct 12, 2017 at 16:01

sol

23k6 gold badges46 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blazemonger · Accepted Answer · 2017-10-12 16:01:31Z

2

Move your input inside the label and use :focus-within (note: doesn't currently work in IE or Edge browsers)

.test-label {
  color: purple;
}

.test-label:focus-within {
  color: blue;
}

<form>
  <label class="test-label">Label
        <br />
        <input type="text" class="test-box">
  </label>
</form>

answered Oct 12, 2017 at 16:01

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Comments

Hidayt Rahman · Accepted Answer · 2017-10-12 17:10:06Z

1

Just keep label after input and apply General Sibling Selector, and make label position:absolute to keep label position on top

.myInput:focus~label {
  color: blue !important;
  cursor: pointer;
}

.test-label {
  color: purple;
  position: absolute;
  top: 0;
  left: 0;
}

.test-box {
  position: relative;
}

.myInput:focus~label {
  color: blue !important;
  cursor: pointer;
}

.myInput:hover {
  color: blue !important;
  cursor: pointer;
}

<form class="test-box">

  <br />
  <input type="text" class="myInput">
  <label class="test-label">Label</label>
</form>

and this will run on all modern browsers. Hope this will help you.

answered Oct 12, 2017 at 17:10

Hidayt Rahman

2,69831 silver badges34 bronze badges

1 Comment

Hidayt Rahman Over a year ago

No Problem, Tricky thing is always better ;)

Luca Putzu · Accepted Answer · 2017-10-12 16:00:45Z

0

.test-label{
			color: purple;
}
.test-box:hover .test-label{
			color: blue !important;
            cursor: pointer;
}

<form class="test-box">
		<label class = "test-label">Label</label>
		<br />
		<input type = "text">
	</form>

answered Oct 12, 2017 at 16:00

Luca Putzu

1,45618 silver badges24 bronze badges

1 Comment

Fred Over a year ago

I want on focus dude.

trav · Accepted Answer · 2017-10-12 16:05:57Z

0

Remove the extra selector from ".test-box:focus" .

.test-label{
			color: purple;
}
.test-box:focus {
			background-color: blue !important;
}

<form>
		<label class = "test-label">Label</label>
		<br />
		<input type = "text" class = "test-box">
	</form>

edited Oct 12, 2017 at 16:05

answered Oct 12, 2017 at 15:59

trav

3762 silver badges9 bronze badges

1 Comment

Fred Over a year ago

No i want text color to be changed!

Collectives™ on Stack Overflow

How to color label on focusing input box via CSS?

5 Answers 5

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related