How to display a label only when an input is focused

Question

Label is covering my input. After I click input I still want to see label with Dupsko content, but over my input.

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;
    position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: text;
    z-index: -10;
}

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

input:focus ~ label {
    position: unset;
    color: #3FBA84;
}

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

How can I apply styles to this label only if input is focused ?

Mobina · Accepted Answer · 2020-07-31T22:06:25.190

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>

Daniel_Knights · Answer 2 · 2020-07-31T21:56:57.013

In CSS you can only select siblings which come after an element.

If you want to select previous siblings but have them ordered (visually) label first, then input, you could set the parent div to:

display: flex; 
flex-direction: column-reverse;

then swap the label and input in the HTML so you can select it with ~:

div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    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;
    position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: text;
    z-index: -10;
}

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

input:focus ~ label {
    position: unset;
    color: #3FBA84;
}

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

How to display a label only when an input is focused

2 Answers2