Is it possible to change the background color on the input field: focus?

Question

Is it possible to change the background color of changing the form field when the cursor is inside any of the text field fields?

I suggested that this might work, but it is not:

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

Answer 1

I’m afraid that this is not possible with CSS, since CSS does not have a selector that selects based on descendant elements. The input[type=text]:focus+fieldset selector in your attempt matches the fieldset element, which immediately follows the focused input text field - something completely different from what you want.

However, this is possible and fairly easy to do using JavaScript. You just need the onfocus and onblur event handlers for the fields within the field set, and these handlers can be the same functions for all of them; they would just change the style.background property of the style.background element,

Answer 2

You cannot create a fieldset style based on the focus state of one of your input s children.

However, you can simulate the effect by adding an empty div as the last child of the fieldset and styling it. These div styles can then be changed using a common selector for 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

Now it is possible with :focus-within

CSS pseudo-class: focus-inside represents an element that received focus or contains an element that received focus. In other words, it represents an element that itself matches the: focus pseudo-class or has a descendant that matches: 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 a set of fields for additional features, just do something like this:

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

If you need it for both boundaries and accessibility, consider moving a set of fields to a div, and then styles containing a div instead of a set of fields.

Hope this helps!

Matt

Answer 5

If you use jQuery and don't insert your fields, you can make a simple binding that joins all your page controls within the fields, and whenever you focus / don't focus on any of these controls, the class is added / removed from The field set that contains the control.

Here is an example:

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