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

Given the following html

<label for="inputelement">label&l开发者_StackOverflowt;/label>
<input type="text" id="inputelement" name="inputelement" />

You can style the input on focus using

input:focus { background: green; }

Is there a way of also styling the <label /> without JavaScript?

Thanks all

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

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

UPDATED

Make sure you check the draft as this may change: https://drafts.csswg.org/selectors-4/#relational

The :has() relational pseudo-class will allow the selection of parents for example, the following selector matches only <a> elements that contain an <img> child:

a:has(> img)

This can be combined with other selectors such as :focus, :active or :not to offer a lot of potential.

Unfortunately browser support isn’t great at the time of writing: https://caniuse.com/#feat=css-has

Adding this for people finding this page in the future. CSS4 will have a parent selector allowing you to choose what element to apply the style to:

label! > input {
  font-weight: bold;
}

article > h1 + section > p! > b > a {
  font-style: italic;
}

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.

You can, so long as the label follows the input in the Mark-up:

input:focus + label,
input:active + label {
    /* style */
}

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>

Yes, of course you can.

You'll need to:

• Group both label and the form into a parent element (like a div)
• Style the label with focus pseudo selector selector for the parent, ie .parent:focus label { color: green }

You can see a very minimal sample at jsfiddle I made.

<div class='workarea'>
    <div class='hasinput'>
        <label>Label 1 (should be green when active)</label>
        <input />
    </div>
    <div class='hasinput'>
        <label>Label 2 (should be green when active)</label>
        <input />
    </div>
</div>

.workarea {
    max-width: 500px;
}

label,
input {
    width: 100%;
}

.hasinput {
    margin-bottom: 1rem;
}

.hasinput label {
    color: blue;
}

.hasinput:focus-within label {
    color: green;
}

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 :-)

Here is an alternative usign CSS grid:

As some sugested if the label is after the input then using flex or in my case using CSS grid you can place the label first.

body {
  font-family: Arial;
}

.form-field {
  display: grid;
  gap: 4px;
}

.form-field label {
  grid-row: 1;
  font-size: 12px;
  color: #737373;
}

.form-field input {
  outline: unset;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #737373;
}

.form-field input:focus {
  border-color: #328dd2;
}

.form-field input:focus + label {
  color: #328dd2;
}

<div class="form-field">
  <input id="myinput" />
  <label for="myinput">
    My Input
  </label>
</div>

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.