html - Highlight fieldset with focused element, without JavaScript -

html - Highlight fieldset with focused element, without JavaScript -

this question has reply here:

is possible alter fieldset's background-color on input:focus? 4 answers

using html & css , without using javascript, how style fieldset around focused form inputs differently rest of fieldsets? (basically, same thing this question without javascript)

below effect want achieve, using javascript:

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $('input').focus(function(){ $(this).parent().addclass('jshack'); }); $('input').blur (function(){ $(this).parent().removeclass('jshack'); }); }); class="snippet-code-css lang-css prettyprint-override">fieldset { border: 2px solid lightgray; } fieldset.jshack { border: 2px solid black; } input:focus { background-color: lightyellow; } class="snippet-code-html lang-html prettyprint-override"><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 identical visually should not utilize javascript in way.

update: not looking magical css parent selector. looking recreations of effect css trickery, such this answer not posted before closed.

this not possible without javascript there no way in css target parent of element... @ to the lowest degree not yet. see this question.

edit: wrong, rick hitchcock has come nice , simple workaround here: http://stackoverflow.com/a/29454224/2126792.

html css css3