CSS :focus-within selector for an element with an iframe child

Question

I have a scenario like this:

.container {
  background: yellow;
  padding: 40px;
}

.container:focus-within {
  background: red;
}

iframe {
  background: white;
}

<div class="container">
  <input type="text" placeholder="Input 1">
  <iframe srcdoc="<input type='text' placeholder='Input 2'>"></iframe>
</div>

As you can see, when I click on input 1 to type, the container turns red because of the :focus-within selector. But when I focus input 2 (inside the iframe), it doesn't.

Is it possible to use a CSS selector on .container for if something inside the iframe is focused? I have control over the CSS inside the iframe as well.

Answer 1

not by css but with jQuery, you can add class to container when input 2 focused, and remove class when it loses focus.

<style>
 .container:focus-within, .container.in_iframe {
            background: red;
        }
</style>

<script>
    $('document').ready(function () {
        $('#iframe').on('load', function () {
            var iframe = $('#iframe').contents();
            iframe.find("input").on('focus', function () {
                $('.container').addClass('in_iframe');
            });
            iframe.find("input").on('focusout', function () {
                $('.container').removeClass('in_iframe');
            });
        });
    });
</script>

full code: https://codepen.io/peker-ercan/pen/PdgEOy