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 类的样式来实现所需的视觉效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/946149.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

天天跳绳(???)

广东省人民政府门户网站 https://www.gd.gov.cn/zwgk/zdlyxxgkzl/whjg/content/post... 二沙岛变身智能“运动岛” - 广东省人民政府门户网站 2020年10月20日  广州二沙岛&#xff0c;犹如一颗璀璨明珠点缀在珠江之心&#xff0c;自然风光旖旎&#xff0c;功能分区清 … 公共…

七、Vue 监听属性

文章目录 一、简介二、基本语法简单监听深度监听 三、与计算属性的区别计算属性&#xff08;computed&#xff09;的特点监听属性和计算属性的不同应用场景 四、在组件中的应用组件内监听属性父子组件通信中的监听属性 五、注意事项异步操作不要过度使用 一、简介 在 Vue.js 中…

视频流媒体解决方案:Liveweb国标GB28181视频监控汇聚平台

视频监控国标平台指的是基于GB/T 28181协议的视频联网平台&#xff0c;可以对接各种符合国标GB/T 28181协议的视频平台、NVR录像机、网络监控摄像头、执法记录仪、应急布控球、移动单兵、无人机等设备。通过国标平台的联网&#xff0c;方便管理分布在不同地点的视频监控和其他视…

Canoe 新建工程和通道连接

文章目录 新建工程硬件通道Vector 硬件驱动Hardware 配置1、通道数量配置2、通道映射3、配置通道波特率 新建工程 新建一个具有一个CAN通道的工程 Ctrl S 保存 硬件通道 以 Vector 1640 为例&#xff1a; Vector 1640通过 USB 和电脑连接后&#xff0c;观察指示灯&#xff…

安卓开发使用Gemini高效AI开发-Android Studio 中使用Gemini

Gemini 是Android Studio最新版本中内嵌的AI工具&#xff0c;它可以通过代码补全、解释代码、提供改进建议、错误分析等方式帮助开发者提高编码效率。当然&#xff0c;与目前大多数AI工具一样&#xff0c;Gemini有时可能会"非常自信"地提供不准确、错误的信息&#x…

从0开始的docker镜像制作-ubuntu22.04

从0开始的docker镜像制作-ubuntu22.04 一、拉取基础ubuntu22.04镜像二、进入拉取的docker镜像中&#xff0c;下载自己需要的安装包三、安装需要的系统软件四、打包现有镜像为一个新的镜像五、推送打包的镜像到私有docker服务器1.编辑docker文件&#xff0c;使其允许http传输和对…

软件测试——面试八股文(入门篇)

今天给大家分享软件测试面试题入门篇&#xff0c;看看大家能答对几题 一、 请你说一说测试用例的边界 参考回答&#xff1a; 边界值分析法就是对输入或输出的边界值进行测试的一种黑盒测试方法。通常边界值分析法是作为对等价类划分法的补充&#xff0c;这种情况下&#xff…

面试场景题系列:设计指标监控和告警系统

在本文中&#xff0c;我们将探讨可扩展的指标监控和告警系统的设计。理解基础设施的状况对维持其可用性和可靠性至关重要。 图-1展示了一些市面上最流行的商用和开源的指标监控和告警服务。 图-1 1.场景边界界定 为了便于展开设计以及考虑通用性&#xff0c;监控和告警需求如…

Spring实现输出带动态标签的日志

版权说明&#xff1a; 本文由博主keep丶原创&#xff0c;转载请保留此块内容在文首。 原文地址&#xff1a; https://blog.csdn.net/qq_38688267/article/details/144851857 文章目录 背景底层原理实现方案Tag缓存实现封装注解通过AOP实现日志缓存封装行为参数通用方法实现手动…

1月第一讲:WxPython跨平台开发框架之前后端结合实现附件信息的上传及管理

1、功能描述和界面 前端&#xff08;wxPython GUI&#xff09;&#xff1a; 提供文件选择、显示文件列表的界面。支持上传、删除和下载附件。展示上传状态和附件信息&#xff08;如文件名、大小、上传时间&#xff09;。后端&#xff08;REST API 服务&#xff09;&#xff1a…

微服务SpringCloud分布式事务之Seata

视频教程&#xff1a;https://www.bilibili.com/video/BV16P63Y3ESq 效果演示 准备的微服务项目调用的链路如下&#xff1a; 文字描述&#xff1a; gateway模块接收到请求&#xff0c;并发送到order订单模块order订单模块接收到请求&#xff0c;新增一个订单数据后发送一个…

Solon 加入 GitCode:助力国产 Java 应用开发新飞跃

在当今数字化快速发展的时代&#xff0c;Java 应用开发框架不断演进&#xff0c;开发者们始终在寻找更快、更小、更简单的解决方案。近期&#xff0c;Solon 正式加入 GitCode&#xff0c;为广大 Java 开发者带来全新的开发体验&#xff0c;尤其是在国产应用开发进程中&#xff…

[实用指南]如何将视频从iPhone传输到iPad

概括 将视频从 iPhone 传输到 iPad 时遇到问题&#xff1f;您可能知道一种方法&#xff0c;但不知道如何操作。此外&#xff0c;您要传输的视频越大&#xff0c;完成任务就越困难。那么如何将视频从 iPhone 传输到 iPad&#xff0c;特别是当您需要发送大视频文件时&#xff1f…

【一起python】银行管理系统

文章目录 &#x1f4dd;计算机基础概念&#x1f320; 导入模块&#x1f320;定义input_card_info函数&#x1f320; 定义check_password函数&#x1f320;初始化用户字典和欢迎信息&#x1f309; 主循环&#x1f309;开户操作&#x1f309;查询操作&#x1f309;取款操作&#…

20241218-信息安全理论与技术复习题

20241218-信息安全理论与技术复习题 一、习题1 信息安全的基本属性是&#xff08;D )。 A、机密性 B、可用性 C、完整性 D、上面 3 项都是 “会话侦听和劫持技术” 是属于&#xff08;B&#xff09;的技术。 A、 密码分析还原 B、 协议漏洞渗透 C、 应用漏洞分析与渗透 D、 D…

音视频入门基础:MPEG2-PS专题(2)——使用FFmpeg命令生成ps文件

一、错误的命令 通过FFmpeg命令可以将mp4文件转换为ps文件&#xff0c;PS文件中包含PS流数据。 由于PS流/PS文件对应的FFInputFormat结构为&#xff1a; const FFInputFormat ff_mpegps_demuxer {.p.name "mpeg",.p.long_name NULL_IF_CONFIG_SMALL…

Unity is running as administrator解决办法

每次打开Unity项目都会有这个弹窗 解决办法&#xff1a; 打开本地安全策略 - 安全选项 &#xff0c;把 用户账户控制&#xff1a;以管理员批准模式运行所有管理员 用户账户控制&#xff1a;用于内置管理员账户的管理员批准模式 改成已启用就行

活动预告 |【Part1】Microsoft Azure 在线技术公开课:数据基础知识

课程介绍 参加“Azure 在线技术公开课&#xff1a;数据基础知识”活动&#xff0c;了解有关云环境和数据服务中核心数据库概念的基础知识。通过本次免费的介绍性活动&#xff0c;你将提升在关系数据、非关系数据、大数据和分析方面的技能。 活动时间&#xff1a;01 月 07 日…

SQL-leetcode-183. 从不订购的客户

183. 从不订购的客户 Customers 表&#xff1a; -------------------- | Column Name | Type | -------------------- | id | int | | name | varchar | -------------------- 在 SQL 中&#xff0c;id 是该表的主键。 该表的每一行都表示客户的 ID 和名称。 Orders 表&#…

HTML5滑块(Slider)

HTML5 的滑块&#xff08;Slider&#xff09;控件允许用户通过拖动滑块来选择数值。以下是如何实现一个简单的滑块组件的详细说明。 HTML5 滑块组件 1. 基本结构 使用 <input type"range"> 元素可以创建一个滑块。下面是基本实现的代码示例&#xff1a; <…