CSS changes with focus attribute on input field

Question

I am trying affect the label whenever the input is focused. For whatever reason the css isnt being recognized for the label whenever the input is focused.

li.sm-vol label {
    position: absolute;
    top: 33px;
    width: 100%;
    background: #462770;
    color: #fff;
    font-weight: 400 !important;
    padding-left: 10px;
    transition: all 0.2s ease;
}

li.sm-vol input:focus li.sm-vol label {
    top: 15px;
}

Could you add the HTML as reference? It would help understand the code and how it behaves. — Running Buffalo
– Running Buffalo, Commented Jun 9, 2016 at 15:03

Stickers · Accepted Answer · 2016-06-10 15:27:20Z

4

You can do it with pure CSS only if the label is next to the input field by using + or ~ selector, i.e.

input:focus + label {
  color: red;
}

<input type="text">
<label>Label</label>

For visually reordering the input and label positions, see the simple demo with flexbox.

.fieldset {
  display: inline-flex;
}
.fieldset label {
  order: -1;
  margin-right: 4px;
}
.fieldset input:focus + label {
  color: red;
}

<div class="fieldset">
  <input type="text">
  <label>Label</label>
</div>

edited Jun 10, 2016 at 15:27

answered Jun 9, 2016 at 15:03

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

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

Collectives™ on Stack Overflow

CSS changes with focus attribute on input field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related