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

Question

Given the following html

label



        

Answer 1

Okay the idea is to wrap the input, label, help, error etc. in a Flexbox Container. Then use the + selector, to select the label element.
Note: it will work only when <label> comes after <input>
Then you define the <label> order by using the flexitem order property.
Sure you can also using classnames.

.container {
    display: flex;
    flex-direction: column;
}
input {
    border: none;
}
label {
    order: -1;
}
input:focus {
    border: 1px solid red;
}
input:focus + label{
    color: red;
}

<div class="container">
    <input id="username" />
    <label for="username">Username</label>
</div>

Answer 2

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...

Answer 3

Give your input button a style class

css style:

INPUT.book:hover, INPUT.book:focus:hover {
    background-image:url(book_over.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

INPUT.book {
    background-image:url(book_active.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

and the input html:

<input name="Bestil2" type="submit" class="book"  value="Book møde" />

I haven't figured out yet, how to avoid grey background even though I have a transparent png file, maybe just an jpg will do. But I hope this helps. Good luck :-)

Answer 4

This can be done if you target browsers that support flexbox - see this: http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview

For brevity, the css there is minimal but you'll need some browser specific prefixes to extend support to somewhat older browsers.

Answer 5

You can use an attribute selector:

label[for=inputelement]:focus,
label[for=inputelement]:active {
    /*styles here*/
}

Note that this isn't supported by IE6, but should work in all other browsers, including IE7 and IE8.

That will obviously only work for that specific ID. If you would like it to work for all IDs, simply leave out the ID:

label[for]:focus,
label[for]:active {
    /*styles here*/
}

This will now work for all labels with a for attribute.

If you need something in between, you'll need to use classes.

Answer 6

For completeness, if your input field is within the label you can use focus-within:

HTML:

<label>
   <input name="example" type="text">
</label>

CSS:

label:focus-within {
   background: #DEF;
}