Is it possible to change a fieldset's background-color on input:focus?

Question

Is it possible to have the background-color of a form's fieldset change when the cursor is inside any of that fieldset's text fields?

I assumed this might work, but it doesn't:

fieldset {background: #ffe;}
input[type=text]:focus+fieldset {background: #ff0;}

Answer 1

I’m afraid it’s not possible with CSS, since CSS hasn’t got a selector that would select on the basis of an element’s children. The selector input[type=text]:focus+fieldset in your attempt matches a fieldset element that immediately follows a focused text input box—something quite different from what you want.

It is however possible and fairly easy do deal with this using JavaScript. You would just need onfocus and onblur event handlers on the fields inside the fieldset, and these handlers could be the same functions for all of them; they would just change the style.background property of the fieldset element,

Answer 2

You can't style a fieldset based on the focus state of one of its children inputs.

However, you can simulate the effect by adding an empty div as the last child of the fieldset, and styling it. This div's styles can then be changed using the general sibling selector on the focused input:

fieldset {
  border: none;
  position: relative;
  margin-bottom: 0.5em;
}

legend {
  position: relative;
  background: white;
}

input:focus {
  background: lightyellow;
}

input:focus ~ div {
  border: 2px solid black;
  background: #def;
}

fieldset > div {
  height: calc(100% - 0.5em);
  width: 100%;
  position: absolute;
  top: 0.5em;
  left: 0;
  border: 2px solid lightgray;
  z-index: -1;
}

<fieldset>
  <legend>Fieldset 1</legend>
  <input name="text1" type="text" />
  <input name="text2" type="text" />
  <div></div>
</fieldset>
<fieldset>
  <legend>Fieldset 2</legend>
  <input name="text3" type="text" />
  <input name="text4" type="text" />
  <div></div>
</fieldset>

Answer 3

This is now possible with :focus-within

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

MDN

fieldset {
  background: green;
  margin: 1em;
}

fieldset:focus-within {
  background: red;
}

<fieldset>
  <input>
</fieldset>

Answer 4

If you are not using the fieldset for accessibility reasons, then just do something like this:

http://www.pmob.co.uk/temp/categorybox.htm

If you need it for both borders AND accessibility, consider wrapping the fieldset in a div and then styling that containing div instead of the fieldset.

Hope this helps!

Matt

Answer 5

If you are using Jquery, and you are not nesting your fieldsets, you can do a simple bind which attaches itself to all your page controls within a fieldsets, and whenever you focus/unfocus on any of these controls, a class is added/removed from the fieldset containing the control.

Here's a sample:

$('input, label, select, option, button', 'fieldset').each(function (index, item) { $(this).focus(function () { $(this).closest('fieldset').addClass('fieldsetFocus'); }); $(this).blur(function () { $(this).closest('fieldset').removeClass('fieldsetFocus'); }); });