努力的小哇 2021-12-09 20:32 采纳率: 50%
浏览 97
已结题

css中当鼠标放在输入框时label上移并且下边框变色

就是当鼠标放在输入框时，label标签上移变色，并且输入框下边框也变色

  • 写回答

3条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-09 20:57
    关注

    纯css实现
    css兄弟选择器只能做到鼠标放入输入框，改变输入框之后的元素样式，所以要把label浮动到输入框左侧
    如有帮助，望采纳 ^.^ 谢谢啦

    img

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
    div{
        padding-top: 200px;
    }
    input:focus-visible{
        outline-offset: unset !important;
        outline: red;
    }
     input:focus{
         border-bottom: 2px solid red !important;
         color: red;
     }
     .label{
              color: blue;
             position: relative;
     }
     input:focus + .label{
         top: -5px;
     }
     
    
    </style>
    <body>
        <div>
            
            <input type="type" placeholder="请输入" />
            <label class="label">用户名</label>
        </div>
        
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 12月18日
  • 已采纳回答 12月10日
  • 创建了问题 12月9日

悬赏问题

  • ¥15 centos7.9 IPv6端口telnet和端口监控问题
  • ¥120 计算机网络的新校区组网设计
  • ¥20 完全没有学习过GAN，看了CSDN的一篇文章，里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 海浪数据 南海地区海况数据，波浪数据
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目，支持注册表等
  • ¥15 matlab 用yalmip搭建模型，cplex求解，线性化处理的方法
  • ¥15 qt6.6.3 基于百度云的语音识别 不会改
  • ¥15 关于#目标检测#的问题：大概就是类似后台自动检测某下架商品的库存，在他监测到该商品上架并且可以购买的瞬间点击立即购买下单