当前位置: 首页 > article >正文

CSS---实现盒元素div内input/textarea的focus状态时给父元素加属性!

注意兼容性,低版本浏览器无效

要实现当 textarea 文本框获得焦点时,自动给其父元素添加类名或样式,您可以使用 CSS 的 :focus-within 伪类选择器。这个选择器会在元素本身或其任何子元素获得焦点时应用样式。

示例代码

假设您有以下 HTML 结构:

<div class="parent">
  <textarea id="myTextarea"></textarea>
</div>

您可以使用以下 CSS 代码来实现当 textarea 获得焦点时,给父元素添加一个类名或样式:

.parent:focus-within {
  border: 1px solid blue; /* 或者添加其他样式 */
}

在这个例子中,当 textarea 文本框获得焦点时,父元素 div 的边框将变为蓝色。

兼容性

请注意,:focus-within 伪类在一些旧版本的浏览器中可能不被支持,因此在实际应用中,您可能需要考虑使用 JavaScript 来实现类似的效果,以确保在所有浏览器中都能正常工作。

使用 JavaScript

如果您需要使用 JavaScript 来实现这个功能,可以通过监听 textareafocus 事件,并在事件处理程序中添加类名或样式到父元素。以下是一个使用 JavaScript 的示例:

const textarea = document.getElementById('myTextarea');
const parent = textarea.parentNode;

textarea.addEventListener('focus', function() {
  parent.classList.add('focused');
});

textarea.addEventListener('blur', function() {
  parent.classList.remove('focused');
});

在这个例子中,当 textarea 获得焦点时,父元素将添加一个名为 focused 的类名,当 textarea 失去焦点时,该类名将被移除。您可以在 CSS 中定义 .focused 类的样式来实现所需的视觉效果。


http://www.kler.cn/a/456620.html

相关文章:

  • QT----------常用界面组件的使用
  • C#封送类
  • WPF中的Microsoft XAML Behaviors包功能详解
  • PHP框架+gatewayworker实现在线1对1聊天--gatewayworker说明(2)
  • 关于无线AP信道调整的优化(锐捷)
  • 闭包的理解
  • uniapp 前端解决精度丢失的问题 (后端返回分布式id)
  • 基于进程信号量的多线程同步机制研究与实现
  • Vue 3 与 Tauri 集成开发跨端APP
  • NLP 中文拼写检测纠正论文 Automatic-Corpus-Generation
  • ArcGIS Pro地形图四至角图经纬度标注与格网标注
  • 螺杆支撑座在运用中会出现哪些问题?
  • 微信流量主挑战:用户破16!新增文档转换(新纪元3)
  • CBSD管理QEMU仿真虚拟机
  • 穷举vs暴搜vs深搜vs回溯vs剪枝系列一>组合
  • 高效搭建Nacos:实现微服务的服务注册与配置中心
  • 字符串函数和结构题内存对齐
  • 虚幻引擎结构之ULevel
  • 小程序配置文件 —— 14 全局配置 - tabbar配置
  • 深度学习笔记(5)——目标检测和图像分割
  • 前端进阶之副作用的分析和控制
  • 微服务-1 认识微服务
  • 用命令行重启资源管理器(记录win解决找不到资源管理器问题)
  • 【 Git 设置代理】
  • upload-labs关卡记录8
  • Java基于SpringBoot的社区团购系统的设计与实现,附源码