5

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

5 Answers5

9

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>
Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
8

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>
Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • This works great, but want to mention that there is limited browser support https://caniuse.com/#feat=css-focus-within – sMyles Feb 06 '19 at 16:28
  • I'm glad I scrolled down to find about this. This answer should get more votes. It works great and has great browser support atm. – xperator Jul 27 '20 at 16:26
1

I’m afraid it’s not possible with CSS, since CSS doesn't have 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,

ag93
  • 343
  • 4
  • 17
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

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

user1434739
  • 235
  • 4
  • 13
0

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

Matt Cashatt
  • 23,490
  • 28
  • 78
  • 111