CSS 实现input自定义样式--文本框
warning:
这篇文章距离上次修改已过195天，其中的内容可能已经有所变动。
要使用CSS为文本框实现自定义样式，你可以通过为input元素设置CSS规则来实现。以下是一个简单的例子，演示如何为文本框设置自定义的背景颜色、边框和圆角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Input Style</title>
<style>
input[type="text"] {
background-color: #f0f0f0; /* 背景色 */
border: 1px solid #ccc; /* 边框颜色 */
border-radius: 4px; /* 圆角 */
padding: 8px 15px; /* 内边距 */
font-size: 16px; /* 字号 */
transition: border-color 0.3s; /* 边框颜色变化过渡 */
}
input[type="text"]:focus {
border-color: #4A90E2; /* 聚焦时的边框颜色 */
box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); /* 聚焦时的阴影效果 */
}
</style>
</head>
<body>
<input type="text" placeholder="请输入内容">
</body>
</html>这段代码定义了一个普通状态下的文本框样式和一个聚焦状态下的样式。当文本框获得焦点时，边框颜色会变化，并且会有一个轻微的阴影效果。这些样式都可以根据你的设计需求进行自定义调整。
评论已关闭