Question

我有这样的情况：

.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内）时，它不会。

是否可以在.container上使用CSS选择器来确定iframe中的某些内容是否已聚焦？我也可以控制iframe中的CSS。

Answer 1

不是CSS的，而是使用jQuery的，您可以在输入2集中时将类添加到容器中，而在失去焦点时删除类。

public class MainActivityMou extends DaggerAppCompatActivity implements
        MainView { 
@Inject
MainPresenter mainPresenter;
....
@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
AndroidInjection.inject(this);
}
....
}

完整代码：https://codepen.io/peker-ercan/pen/PdgEOy

CSS：focus-within选择器，用于具有iframe子元素的元素

1 个答案: