假设你有类似的东西:
<div class="parent">
<input class="childInput" type="text" />
<div class="sibling"></div>
</div>
我想在孩子获得焦点时更改父母/兄弟姐妹的外观。有没有 CSS 技巧可以做这样的事情?
Edit:
我的问题的原因如下:
我正在创建一个需要可编辑文本字段的 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 恢复显示标签是有问题的:用户必须单击文本输入,然后再次单击它才能恢复显示标签。
Edit:
这是这个问题的一个例子:http://plnkr.co/edit/synSIP?p=preview http://plnkr.co/edit/synSIP?p=preview
您现在可以在纯 CSS 中执行此操作,因此不需要 JavaScript ????
新的 CSS 伪类:focus-within
对于这样的情况会有所帮助,并且当人们使用选项卡进行导航时,将有助于提高可访问性,这在使用屏幕阅读器时很常见。
.parent:focus-within {
border: 1px solid #000;
}
:focus-within 伪类匹配元素本身
匹配 :focus 或具有匹配 :focus 的后代。
我可以用吗...
您可以通过访问查看哪些浏览器支持此功能http://caniuse.com/#search=focus-within http://caniuse.com/#search=focus-within
Demo
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 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)