首页用html实现一个文本框，输入时文本框边框颜色逐渐变亮，模拟聚焦效果，并在失去焦点时恢复原状

用html实现一个文本框，输入时文本框边框颜色逐渐变亮，模拟聚焦效果，并在失去焦点时恢复原状

时间: 2024-12-04 18:22:46 浏览: 43

在HTML中，你可以通过CSS来实现这个文本框的动态聚焦效果。首先，创建一个基本的`<input>`元素作为文本框： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* 定义初始样式 */ input[type=text] { border: 1px solid #ccc; /* 初始边框颜色 */ outline: none; /* 避免默认的虚线轮廓 */ transition: border-color 0.5s ease; /* 添加过渡效果 */ } /* 鼠标悬停或聚焦时的样式 */ input[type=text]:focus { border-color: #88f; /* 边框颜色渐亮 */ box-shadow: 0 0 4px rgba(136, 255, 0, .8); /* 添加阴影 */ } /* 失去焦点后的样式恢复到初始状态 */ input[type=text]:focus~* { margin-webkit-autofill-height; /* 等于浏览器自动填充的高度 */ } </style> </head> <body> <input type="text" placeholder="请输入内容"> </body> </html> ``` 在这个示例中，当用户点击文本框或将其聚焦时，边框颜色会变为浅蓝色(#88f)并添加一个阴影效果。当你移开鼠标或切换到另一个输入框时，文本框的边框颜色将平滑地回到初始灰色(#ccc)，同时消除焦点效果。

阅读全文