CSS:改变孩子焦点的父母 [英] CSS: Change parent on focus of child
问题描述
假设您有以下内容:
<div class="parent">
<input class="childInput" type="text" />
<div class="sibling"></div>
</div>
我希望在孩子获得焦点时更改父/兄弟姐妹的外观。是否有任何CSS技巧可以做这样的事情?
I want to change the appearance of the parent/siblings when the child receives focus. Are there any CSS tricks for doing stuff like this?
编辑:
我的问题的原因如下:
我正在创建一个需要可编辑文本字段的Angular应用程序。它应该看起来像一个标签,直到它被点击,此时它应该看起来像一个普通的文本输入。我基于以下方式设置文本字段:focus以实现此效果,但文本被文本输入的边界切断。我还使用ng-show,ng-hide,ng-blur,ng-keypress和ng-click在标签和文本输入之间切换,基于模糊,按键和点击。除了一件事之外,这个工作正常:在标签的ng-click =setEdit(this,$ event)之后,将ng-show和ng-hide使用的编辑布尔值更改为true,它使用jQuery调用.select()文字输入。但是,直到完成ng-click之后,所有内容都是$ digest'd,因此文本输入再次失去焦点。由于文本输入实际上从未实际获得焦点,因此使用ng-blur恢复显示标签是错误的:用户必须单击文本输入,然后再次单击它以恢复显示标签。
I'm creating an Angular app which needs editable text fields. It should look like a label until it is clicked, at which point it should look like a normal text input. I styled the text field based on :focus to achieve this effect, but the text is cut off by text input's boundaries. I also used ng-show, ng-hide, ng-blur, ng-keypress and ng-click to switch between the label and the text input based on blurs, key presses and clicks. This worked fine except for one thing: After the label's ng-click="setEdit(this, $event)" changes the edit boolean used by ng-show and ng-hide to true, it uses a jQuery call to .select() the text input. However, it isn't until after the completion of the ng-click that everything is $digest'd, so the text input loses focus again. Since the text input never actually receives focus, using ng-blur to revert back to showing the label is buggy: The user has to click in the text input and then click out of it again to revert back to showing the label.
编辑:
以下是问题的示例: http://plnkr.co/edit/synSIP?p=preview
推荐答案
您现在可以在纯CSS中执行此操作,因此不需要JavaScript。
You can now do this in pure CSS so no JavaScript is needed.
新的CSS伪类:focus-within
将有助于此类案例,当人们使用Tab键进行导航时,将有助于访问,在使用屏幕阅读器时常见。
The new CSS pseudo-class :focus-within
would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.
.parent:focus-within {
border: 1px solid #000;
}
:focus-within伪类匹配自己
匹配的元素:focus或具有匹配的后代:focus。
The :focus-within pseudo-class matches elements that either themselves match :focus or that have descendants which match :focus.
您可以查看哪些浏览器支持此 http://caniuse.com/#search=focus-在
You can check which browsers support this http://caniuse.com/#search=focus-within
fieldset {
padding: 0 24px 24px !important;
}
fieldset legend {
opacity: 0;
padding: 0 8px;
width: auto;
}
fieldset:focus-within {
border: 1px solid #000;
}
fieldset:focus-within legend {
opacity: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<fieldset>
<legend>Parent Element</legend>
<div class="form-group">
<label for="name">Name:</label>
<input type="email" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</fieldset>
</form>
</div>
这篇关于CSS:改变孩子焦点的父母的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!