How to change the color of text in label when input next to it is focused in form with multiple lable and input in css

Question

In my form, I have multiple label and inputs. I want to change the text color of the particular label in input next to it is focused.

My form html code is below:

<div class="form">
                    <label class="label">Basic Details<br>
                        <table class="form-table">
                            <tr>
                                <td><label class="form-label">Name:</label></td>
                                <td><input type="text" name="name" placeholder="Name" required></td>
                            </tr>
                            <tr>
                                <td><label>Email:</label></td>
                                <td><input type="email" name="email" placeholder="Email" required></td>
                            </tr>
                            <tr>
                                <td><label>Phone number:</label></td>
                                <td><input type="phone" name="phone" placeholder="Phone number"required></td>
                            </tr>
                        </table>
                        
                </div>

I want to change the color of Name label when I focus on the name input next to it.

try to take a look at [this](https://stackoverflow.com/questions/21154616/on-input-focus-change-color-of-label-how) — WoAiNii, Mar 25 '20 at 19:53
@MatteoZanini I am not sure about less or css. I am using plain simple css here! — , Mar 25 '20 at 19:54
Then like [this](https://codepen.io/lihs/pen/MEvzxr), or [this](https://stackoverflow.com/questions/45963103/change-text-color-of-label-on-focus-input)? — WoAiNii, Mar 25 '20 at 20:06

Rainbow · Accepted Answer · 2020-03-30T23:31:00.700

1

We can make use of + selector and change the order of elements in the html and revers it back through css using the order property which is part of flexbox.

[table] {
  display: table;
}

[row] {
  display: flex;
}

input {
  margin-left: auto;
  order: 2;
}

[row]>input:focus+label {
  color: red;
}

<div class="form">
  <div table>
    <div row>
      <input type="text" name="name" placeholder="Name" required>
      <label class="form-label">Name:</label>
    </div>
    <div row>
      <input type="email" name="email" placeholder="Email" required>
      <label>Email:</label>
    </div>
    <div row>
      <input type="phone" name="phone" placeholder="Phone number" required>
      <label>Phone number:</label>
    </div>
  </div>
</div>

edited Mar 30 '20 at 23:31

answered Mar 25 '20 at 20:05

Rainbow

6,772
3
11
28

Thanks for the solution. But the labels and inputs are not aligned well. How can I resolve this issue? – Mar 30 '20 at 22:51
What you mean when you say not aligned well ? – Rainbow Mar 30 '20 at 22:54
Currently, the form in the page looks like this [link](https://ibb.co/TbXkCM7), but I want them like this [link](https://ibb.co/j553krV). Here the input fields are aligned. I am new to code, I hope you have understood my problem. – Mar 30 '20 at 23:02
The way i have them laid out they're aligned like the picture you showed me, i don't understand. – Rainbow Mar 30 '20 at 23:08
the code you have given in the answer display like this [link](https://ibb.co/WtFVL7g), but when i try to place the form in the middle using auto margin, it display like this [link](https://ibb.co/TbXkCM7). I want to start both the input boxes start from the same position in different lines. – Mar 30 '20 at 23:14
Presently, in another form, I have tags above the tags to change the color of the label in :focus. Now How can I move the above while keeping the color change on :focus working? – Apr 02 '20 at 10:50
Isn't that what this question and answer all about ? i don't really understand what you mean. – Rainbow Apr 02 '20 at 12:35

How to change the color of text in label when input next to it is focused in form with multiple lable and input in css

1 Answers1