0

Using only HTML & CSS and without using JavaScript, how would I style the fieldset around focused form inputs differently from the rest of the fieldsets? (Basically, the same thing as this question but without JavaScript)

Below is the effect I want to achieve, currently using JavaScript:

$(document).ready(function()
{
    $('input').focus(function(){ $(this).parent().addClass('jshack'); });
    $('input').blur (function(){ $(this).parent().removeClass('jshack'); });
});
fieldset { border: 2px solid lightgray; }
fieldset.jshack { border: 2px solid black; }
input:focus { background-color: lightyellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="?" method="get">
    <fieldset>
        <legend>Fieldset 1</legend>
        <input name="text1" type="text" />
        <input name="text2" type="text" />
    </fieldset>
    <fieldset>
        <legend>Fieldset 2</legend>
        <input name="text3" type="text" />
        <input name="text4" type="text" />
    </fieldset>
</form>

Desired end result should be identical visually but should not use JavaScript in any way.

UPDATE: I am not looking for the magical CSS parent selector. I am looking for recreations of the effect with CSS trickery, such as this answer which could not be posted before this was closed.

Community
  • 1
  • 1
LB--
  • 1,898
  • 1
  • 28
  • 72

1 Answers1

2

This is not possible without javascript as there is no way in CSS to target the parent of an element... at least not yet. See this question.

Edit: I was wrong, Rick Hitchcock has come up with a very nice and simple workaround here: https://stackoverflow.com/a/29454224/2126792.

Community
  • 1
  • 1
pschueller
  • 4,166
  • 2
  • 22
  • 49
  • I've decided to reword the question to ask for recreations instead of the magical CSS parent selector, but I had already voted on this answer. – LB-- Apr 05 '15 at 05:05
  • You're not "wrong" at all. The fieldset itself cannot be styled based on a focused input. I simply came up with a way to simulate the effect. – Rick Hitchcock Apr 05 '15 at 16:54