努力的小哇 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 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。