input输入框focus获得焦点边缘发亮

最新推荐文章于 2025-06-13 11:07:17 发布

weixin_34144450

最新推荐文章于 2025-06-13 11:07:17 发布

阅读量732

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/xiaoliu66007/p/5003674.html

本文展示了一段改进的输入框样式代码实现，包括聚焦时的边框颜色变化、阴影效果以及透明边框的设计，旨在提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从某个插件上摘下来的代码

<html>
<head>
<title> New Document </title>
<style>
textarea:focus,input[type="text"]:focus,input[type="datetime"]:focus{border-color:rgba(82, 168, 236, 0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);}
</style>
</head>

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

textarea:focus,input[type="text"]:focus,input[type="datetime"]:focus
{
border-color:rgba(82, 168, 236, 0.8);
outline:0;
outline:thin dotted \9;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

效果

focus前：