Web实现：伪类事件伪类获取焦点后 input元素获取焦点之后改变边框颜色的实现

jasmyn518

于 2022-01-23 07:59:07 发布

阅读量441

点赞数 1

分类专栏： HTML CSS 笔记文章标签：前端 css css3 html

本文链接：https://blog.csdn.net/jasmyn518/article/details/122647128

版权

笔记同时被 3 个专栏收录

127 篇文章

订阅专栏

HTML

78 篇文章

订阅专栏

CSS

68 篇文章

订阅专栏

HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <input type="text">
</body>

</html>

CSS部分代码：

input {
    width: 200px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid #4c4c4c;
    border-radius: 6px;
    outline: 0;
}
/*添加focus属性*/
input:focus{
  border: 1px solid salmon;
}