input[type="text"],textarea {
border: 2px solid #ddd;
}
这里我们为所有的 input[type="text"] 和 textarea 元素设置 2 像素宽度、solid 风格和 #ddd 颜色的边框。
然后，我们需要使用 CSS3 的 :focus 伪类选择器来定义表单被点击时的样式。可以使用以下代码：
input[type="text"]:focus,textarea:focus {
border-color: #ff5722;
Box-shadow: 0 0 5px #ff5722;
}
这里我们为所有被聚焦的 input[type="text"] 和 textarea 元素设置 #ff5722 颜色的边框，同时也添加了一个 5 像素的 #ff5722 阴影效果。
最后，我们可以将两段代码合并到一起：
input[type="text"],textarea {
border: 2px solid #ddd;
}
input[type="text"]:focus,textarea:focus {
border-color: #ff5722;
Box-shadow: 0 0 5px #ff5722;
}
现在，每当用户点击一个被设置为 input[type="text"] 或 textarea 的表单时，它的边框颜色就会变成 #ff5722。这是一种非常简单且实用的方式来增强页面的交互性和美观程度。
总结
我们在这篇文章中讲解了如何使用 CSS3 的 :focus 伪类选择器来实现点击表单边框颜色的功能。我们可以通过给表单设置默认的边框颜色，然后使用 :focus 伪类选择器来定义它被聚焦时的样式。希望这篇文章对你有所帮助，谢谢！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
