How to change color of label text when focus on input ? Without using Javascript.

Question

When click in the text input tag then the color also gets change of label. Using html and css only

Answer 1

/*css*/

.input1:focus .label1 {
color: 'blue'; /*set your color here*/
}

/* be sure to add this to change the text to it's original color after focus is out */

.input1:blur .label1 {
color: 'black';
}

Answer 2

Normally styling of label comes before input tag eg. label: input
Use display: flex and row/column-reserve to help in positioning
https://code.sololearn.com/W16Ur6im49l2/?ref=app

Your modified code
https://code.sololearn.com/WTYqWQPZxLir/?ref=app

Answer 3

Good work 👏