HTML+CSS学习之input框hover和focus时设置边框色

最新推荐文章于 2024-04-23 22:27:30 发布

献_

最新推荐文章于 2024-04-23 22:27:30 发布

阅读量2.7k

点赞数 2

分类专栏： HTML+CSS 文章标签： css html 学习

本文链接：https://blog.csdn.net/weixin_45726044/article/details/126303804

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题描述

实现目标：实现鼠标hover和focus到input输入框时，输入框外边框是蓝色的
实际问题：hover和focus分别添加border属性和outline属性，但是两边框叠加；而不设置focus的outline属性，focus时外边框颜色会被原本input属性覆盖

hover时正常
focus时边框叠加
去掉input:focus则focus边框为黑色

<style>
    input:hover{
      border: 1px solid #2288ee;
    }
    input:focus{
      outline: 1px solid #2288ee;;
    }
  </style>

<input type="text">

解决方法

不需要给input:focus加上outline属性，保留input:hover的border属性且在input上去掉原本的outline属性
即outline:none即可

<style>
    input{
      outline: none;
    }
    input:hover{
      border: 1px solid #2288ee;
    }
  </style>
<input type="text" placeholder="请输入搜索关键字">