首页 > 其他分享 >野花--input获取焦点,改变父元素,改变兄弟元素,不使用js来实现

野花--input获取焦点,改变父元素,改变兄弟元素,不使用js来实现

时间:2022-11-05 16:01:52浏览次数:54  
标签:search within -- 焦点 元素 focus js input

:focus-within
:focus-within 是一个CSS 伪类 ,表示一个元素获得焦点,或该元素的后代元素获得焦点。换句话说,元素自身或者它的某个后代匹配 :focus 伪类。(shadow DOM 树 (en-US)中的后代也包括在内)

          form:focus-within {
            .input_search_text {
              border: 1px solid #ff6700;
            }
          }

 

form作为父元素,当子元素获得焦点时,父元素focus-within也能触发,因此.就可以进行父元素,及父元素下的其他子元素的操作.

相当于用父元素来监控子元素.

 

改变兄弟元素

        .input_search_text:focus~.input_search_btn {
          border: 1px solid #ff6700;
        }

比如input和button是兄弟元素,就可以直接进行操作兄弟元素

标签:search,within,--,焦点,元素,focus,js,input
From: https://www.cnblogs.com/ericyjchung/p/16860356.html

相关文章

  • 电子自洽,显示在计算,但是不跑。
    question:结构优化已经完成,进行电子结构自洽,发现算了5个多小时,tailOUTCARdisplay:SolvationEdiel_sol=0.00000000freeenergyTOTEN=7945.728......
  • 7-24 龟兔赛跑
    乌龟与兔子进行赛跑,跑场是一个矩型跑道,跑道边可以随地进行休息。乌龟每分钟可以前进3米,兔子每分钟前进9米;兔子嫌乌龟跑得慢,觉得肯定能跑赢乌龟,于是,每跑10分钟回头看一下乌龟......
  • linux kernel相关文档
    https://www.kernel.org/doc/html/latest/index.htmlhttps://docs.kernel.org/index.html上面两个网站都指向同个网页......
  • 5款新人必备的电脑软件
    1.优效日历这是一款桌面日历软件,界面简洁,显示全面。这个日历会显示节日、法定节假日加班、调休、抢票、排班等,适合我们在工作中使用,还可以定制桌面天气、桌面倒数日、桌面天......
  • web
    title:建站之旅date:{{date}}时间历程2022/11/04入园,打算好好打理博客.2022/11/05做了一天的hexo,终于可以在本地实现界面.荆棘之路fatal:Thecurrentbranch......
  • 十个整数找最大
    【题目名称】求最大值【题目内容】求10个整数中最大值#include<stdio.h>int main(){int i=0;int arr[]={1,2,3,4,5,6,7,8,9,10};int sz=sizeof(arr)/sizeof(arr[0]......
  • C++——优先级队列(priority_queue)
    其为队列需要包含头文件#include,其与queue的不同之处在于,可以自定义数据的优先级,让优先级高的排在队列的前面,优先出队;优先队列具有队列的所有特性,包括基本操作,只是在此基......
  • dbhaver找不到树元素“/General/Scripts/Script-5.sql”。
    正常情况下对应的dbhaver的安装是没有问题的。但是安装出现如下错误:baidu.com找不到树元素“/General/Scripts/Script-5.sql”。解决方案如下:​到workspace6目录下,重命名wo......
  • Spring bean循环依赖问题: Bean with name '..' has been injected into other be
    Springboot启动报错: Beanwithname'bpmProcessInstanceApiImpl'hasbeeninjectedintootherbeans[bpmProcessInstanceServiceImpl]initsrawversionasparto......
  • ASEMI肖特基二极管SB40100LCT参数,SB40100LCT规格书
    编辑-ZASEMI肖特基二极管SB40100LCT参数:型号:SB40100LCT最大重复峰值反向电压(VRRM):100V最大平均正向整流输出电流(IF):40A峰值正向浪涌电流(IFSM):200A每个元件的典型热阻(ReJA):2℃/W......