CODEWITHSUNDEEP
cssforms
rthames62
rthames62

Reputation: 155

CSS changes with focus attribute on input field

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;
}

Upvotes: 0

Views: 86

Answers (1)

Stickers
Stickers

Reputation: 78776

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>

Upvotes: 4

Related Questions