CODEWITHSUNDEEP
htmlcss
Mojtaba Asgari
Mojtaba Asgari

Reputation: 135

How can I change the color of label when focus on input?

This is my CSS code:

.textOnInput input {
    border-radius: 10px;
    border: 1px solid rgb(150, 150, 150);
}

.textOnInput input:focus {
    color: red;
    outline: none !important;
    border-color: purple;
    transition: 0.3s ease;
    border-radius: 10px;
}

.textOnInput {
    position: relative;
}

.textOnInput label {
    position: absolute;
    padding: 2px;
    z-index: 1;
}
.textOnInput label:after {
    content: " ";
    position: absolute;
    z-index: -1;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

and this is my HTML code:

<div class="textOnInput">
    <label for="inputText">Email</label>
    <input type="text"/>
</div>

How can I change "Email" Color when I focus on input? Label should change color from white to red when I focus on input.

Upvotes: 0

Views: 1269

Answers (4)

Omar Siddiqui
Omar Siddiqui

Reputation: 1655

There are 2 CSS selectors that allow for styling adjacent elements. They are + and ~, with the first one styling the immediate next sibling, and the second one styling all siblings that come later.

So for example, if you have 3 elements like this:

<style>
  div {
    width: 30px;
    height: 30px;
  }

  #main + div {
    background: crimson;
  }

  #main ~ div {
    background: steelblue;
  }
</style>

<div id="main"></div>
<div id="siblingOne" class="sibling"></div>
<div id="siblingTwo" class="sibling"></div>

#main + div will apply styles only to #siblingOne, whereas #main ~ div will apply styles to both #siblingOne and #siblingTwo.

The problem we have is that the sibling selectors only apply forwards. That is, you cannot select an element before #main with this.

So to apply this to your problem, you should structure your HTML in such a way that the <label> comes after <input>. And then you can display all of them as flex (the container, and both it's children), and use the order property to render it the way you originally wanted to.

Here is a snippet of how it will look:

* { font-family: sans-serif; }

.textOnInput input {
    border-radius: 10px;
    padding: 5px 10px;
    border: 1px solid rgb(150, 150, 150);
    order: 1; /* This is important */
    display: flex; /* This is important */
}

.textOnInput {
    display: flex; /* This is important */
    align-items: center;
    position: relative;
}

label {
    display: flex; /* This is important */
    order: 0; /* This is important */
    margin-right: 5px;
}

input:focus {
  outline: none;
}

input:focus + label {
    color: red;
    transition: 0.3s ease;
}
<div class="textOnInput">
    <input type="text" id="inputText"/>
    <label for="inputText">Email: </label>
</div>

Upvotes: 0

Mojtaba Asgari
Mojtaba Asgari

Reputation: 135

Thank you so muchhhh, But I had another problem that it was in HTML code too...

I had to write input line first then label line.

I mean:

<label for="inputText">Email</label>
<input type="text"/>

To:

<input type="text"/>
<label for="inputText">Email</label>

Thanks for helping :P

Upvotes: 0

Dibash Sapkota
Dibash Sapkota

Reputation: 665

You can try this
using Flex box will solve this. Have the label element follow the input element in the HTML. Then use flex-direction: column-reverse to change its position to appear above the input element. You can then use the input:focus + label: {} to target the label.

.input-container {
  display: flex;
  flex-direction: column-reverse;
}

.input-container>input {
  /* your input styles */
}

.input-container>input:focus+label {
  /* targets the label when the input receives focus */
  color: red;
}
<div class="input-container">
  <input type='email' />
  <label>Email</label>
</div>

Upvotes: 2

AlexUnited
AlexUnited

Reputation: 36

Are you trying to do this ?

enter image description here

.textOnInput input {
    border-radius: 10px;
    border: 1px solid rgb(150, 150, 150);
}

#focus:hover ,#text:focus{
    color: red;
    outline: none !important;
    border-color: purple;
    transition: 0.3s ease;
    border-radius: 10px;
}

.textOnInput {
    position: relative;
}


.textOnInput label:after {
    content: " ";
    position: absolute;
    z-index: -1;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css" >

</head>
<body>
    <div class="textOnInput">
        <label id="focus" for="inputText">Email</label>
        <input id="text" type="text" value="[email protected]"/>
    </div>
    
</body>
</html>

Upvotes: 0

Related Questions