CODEWITHSUNDEEP
css
user6632933
user6632933

Reputation:

Highlight label when the field is focused

So I have a data-list field below where I want to also change the label colour when the field is focused. What I've done below is I can't highlight the label when field is focused; it's the field only that is highlighted.

enter image description here

I have the css below:

<style lang="scss">
    .panel-con {
    color:rgba(0,0,0,0.54);
    }
    .group-list{
       input:focus { 
          border-color: #dbb100;
       }
    }
</style>

How can I make the labels' color the same as the fields color when the field is focused?

Upvotes: 1

Views: 947

Answers (2)

Jordan Quartermain
Jordan Quartermain

Reputation: 652

If your label is before your input/select in the DOM, you can't do it with just CSS alone. You'd need JS.

If your label is after your input/select in the DOM, you could do something like this. (I've created something similar to what you have shown)

.wrapper {
  position: relative;
  padding-top: 30px;
}
.wrapper select {
  display: block;
}
.wrapper select:focus {
  color: red;
}
.wrapper select:focus + label {
  color: red;
}
.wrapper label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
<div class="wrapper">
<select name="example">
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
<label for="example">Test Label</label>
</div>

Upvotes: 2

user3003238
user3003238

Reputation: 1515

you need

:focus-within


.wrapper:focus-within p {
  color: red;
}
<div class='wrapper'>
  <input class='input' type='text'/>
  <p>your text</p>
</div>

Upvotes: 0

Related Questions