Anyway to Have a Label Respond to :Focus CSS

Anyway to have a label respond to :focus CSS

You can't actually give focus to a label. It's not a focusable form element. Besides, even if you could do that, then whatever previously had focus (that means your input) would lose it to the label anyway.

You may have to restructure your HTML (and modify your CSS accordingly) so that you can select input:focus and then that input's corresponding label. For instance, if you moved your label after your input and used the following CSS selector for your label, you should be able to accomplish what you want.

#header .search input:focus + label

dealing with input:focus + label in css

You'll need to be consistent with your markup, but you can just use another sibling selector:

input:focus + label {
     color:red;
}

input:focus + label + div.arrow {
     border-top-color: #333;
     border-right-color: #333;
}

Can you style an active form input's label with just CSS

No. there is unfortunately no predecessor selector in css

input:focus -+ label { ... }

would be lovely.

having the label after the input would be dooable:

input:focus + label { ... }

you could use some positioning to display before...

toggling styles on label (active/focus) for input field with css only

Try this way:- Place your label after input and float it left. And apply siblings.

Html

<div class="row">
    <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    <label for="contact_form_mail">Email</label>
</div>

CSS

label {
    float:left;
}
input:focus + label {
    color:red;
}

Demo

This is a hack to get the adjacent sibling selector work as it applies only on the following element and not the preceding one. ~ will select all the adjascent siblings after this element. So if you are having different .row for each section of inputs then use +.

Is there a way in CSS to make a label get a different property when an input is focused without using JS?

You can use the :focus-within pseudo-class:

matches an element if the element or any of its descendants are focused.

You might want to check if the browser compatibility fits your requirements at caniuse.com

And create a selector like this:

    .firstname:focus-within .input-label {
      color: red;
    }

.input-label {
  display: flex;
  align-items: center;
  height: 16px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1px;
  color: #989898;
  text-transform: uppercase;
}

.form-control {
  display: inline-block;
  max-width: 100%;
  word-wrap: normal;
  background: transparent;
  border: none;
  border-bottom: 2px solid #cacaca;
  color: #4a4a4a;
  font-size: 1.19em;
  height: 35px;
  letter-spacing: .2px;
  padding: 7px 0;
  width: 100%;
  resize: none;
}

.firstname:focus-within .input-label {
  color: red;
}

<div class="firstname">
  <label for="name" class="input-label" id="name-label">First Name</label>
  <input type="text" class="form-control" id="name" placeholder="First Name" required>
</div>

How to display a label only when an input is focused

The input:focus ~ label selects every label element that are preceded by an input:focus element. So you need to change the order of two elements in your html. Also, I moved the

position: absolute;

from label to input so that the input will be stacked on top of the label.

div {
    position: relative;
    background-color: rgba(38, 50, 56, 0.31);
    transition: all 250ms cubic-bezier(0.35, 0, 0.25, 1);
}

label {
    padding-left: 8px;
    overflow: hidden;
    cursor: text;
    text-overflow: ellipsis;
}

input {
    position: absolute;
    outline: none;
    border: none;
    background-image: none;
    background-color:  transparent;

    width: 100%;
    padding: 8px;
    border-bottom: 1px solid #263238;;
    transition: all 250ms cubic-bezier(0.35, 0, 0.25, 1);
}

input:focus {
    background-color: #263238;
    border-bottom: 2px solid #3FBA84;
    color: #FFFFFF;
    z-index: -1;
}

input:focus ~ label {
    position: unset;
    color: #FFFF;
    z-index: 1;
}

<div>
  <input><label>Dupsko</label>
</div>

Label doesn't transform on input focus

• in css we can only select next sibling, we cannot select sibling that comes before selector sibling in DOM.
• so, I have just placed label after input.
• Use below css to keep label before input in view.

.input-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}

.input-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}

.user-label {
  transition: 0.5s;
}

.user-input:active+.user-label,
.user-input:focus+.user-label,
.user-input:valid+.user-label {
  color: yellow;
  transform: translate(10px, -14px) scale(.8);
}

<div class="container">
  <div class="input-group">
    <input type="text" name="user" class="user-input" required>
    <label for="user" class="user-label">Username</label>
  </div>
</div>

Highlight label when the field is focused

you need

:focus-within

.wrapper:focus-within p {

  color: red;

}

<div class='wrapper'>

  <input class='input' type='text'/>

  <p>your text</p>

</div>

CSS input:focus + label to change label style when LABEL is not adjacent to INPUT. Is it possible?

You can use the sibling selector ~.

input:focus ~ label

The sibling must come after the element not before.

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

---

Related Topics