CSS: селектор фокуса внутри элемента с дочерним элементом iframe - PullRequest
Новая
       29

CSS: селектор фокуса внутри элемента с дочерним элементом iframe

0 голосов
/ 23 сентября 2018

У меня есть такой сценарий: 

.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>

Как вы можете видеть, когда я нажимаю на вводе 1 для ввода, контейнер становится красным из-за селектора :focus-within.Но когда я фокусирую ввод 2 (внутри iframe), это не так.

Можно ли использовать селектор CSS на .container, если что-то внутри iframe сфокусировано?Я также могу контролировать CSS внутри iframe.

1 Ответ

0 голосов
/ 23 сентября 2018

не с помощью css, но с помощью jQuery, вы можете добавить класс в контейнер, когда фокус ввода 2, и удалить класс, когда он потерял фокус. 

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

полный код: https://codepen.io/peker-ercan/pen/PdgEOy

...