原创

CSS实现获取input焦点,改变父元素或者兄弟元素

温馨提示:
本文最后更新于 2023年04月10日,已超过 414 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

: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是兄弟元素,可以直接进行操作兄弟元素。

正文到此结束
该篇文章的评论功能已被站长关闭
本文目录