V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yezheyu
V2EX  ›  程序员

请教一个前端的 css 问题

  •  
  •   yezheyu · 2022-05-06 13:16:32 +08:00 · 1749 次点击
    这是一个创建于 692 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在学习前端的 css 样式

    遇到一个问题,有没有懂哥帮忙产考下。

    我写了个输入框,样式是只显示底部 border

    1

    但是当输入框鼠标聚焦时,之前隐藏的其它 3 个 border 又显示出来,这个怎么解决?

    2

    9 条回复    2022-05-06 13:55:25 +08:00
    niucility
        1
    niucility  
       2022-05-06 13:26:16 +08:00
    修改 input:focus{} ?
    wangtian2020
        2
    wangtian2020  
       2022-05-06 13:26:42 +08:00
    点击 chrome devtools 中元素中的样式中 [:hov] 强制设置元素状态勾选 [:focus] 查看并覆盖重置在聚焦时的输入框样式
    iOCZ
        3
    iOCZ  
       2022-05-06 13:27:20 +08:00
    被 focus 覆盖了?
    pengtdyd
        4
    pengtdyd  
       2022-05-06 13:28:50 +08:00   ❤️ 1
    css 请重学一下,谢谢!
    wiluxy
        5
    wiluxy  
       2022-05-06 13:33:01 +08:00
    这个不是 border ,这个是 outline ,还需要设置 outline:none
    shintendo
        6
    shintendo  
       2022-05-06 13:34:42 +08:00
    这个输入框原来有基本样式和聚焦时样式(用:focus 选择器定义)
    你自己写的样式只覆盖了基本样式
    foolnius
        7
    foolnius  
       2022-05-06 13:38:08 +08:00
    打开浏览器的 Dev Tools => Elements/元素,看看 input 聚焦 focus 之后的 Styles 变化
    shuxhan
        8
    shuxhan  
       2022-05-06 13:39:14 +08:00
    outline:none
    yezheyu
        9
    yezheyu  
    OP
       2022-05-06 13:55:25 +08:00
    @wiluxy
    @shuxhan

    多谢老哥,完美解决
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   988 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:17 · PVG 04:17 · LAX 13:17 · JFK 16:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.