CSS实现获取input焦点,改变父元素或者兄弟元素
温馨提示:
本文最后更新于 2023年04月10日,已超过 238 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我。
:focus-within 伪类
表示一个元素获取焦点,或该元素的后代元素获得焦点。元素自身或者它的某个后代匹配 :focus 伪类。(shadow DOM 树 (en-US)中的后代也包括在内)
.div_class:focus-within {
input {
border: 1px solid #999; color: #999;
}
}
div_class作为父元素,当input子元素获得焦点时,父元素focus-within也能触发。因此进行父元素及父元素下的其他子元素的操作,相当于用父元素来监控子元素。
改变兄弟元素样式
input:focus~.input_btn {
border: 1px solid blue; color:blue;
}
比如input和input_btn是兄弟元素,可以直接进行操作兄弟元素。
正文到此结束
- 本文标签: 前端 css
- 本文链接: http://www.92cxy.cn/article/99
- 版权声明: 本文由王小东原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
相关文章
该篇文章的评论功能已被站长关闭