🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS输入框模板：通过border-radius和padding添加样式

📝 用途

此模板用于给输入框添加圆角（`border-radius`）和内边距（`padding`）。

📘 解释

此代码使用 `border-radius` 使输入框的角变圆，使用 `padding` 调整输入框内部的间距。`input:focus` 规则则改变输入框聚焦时的边框颜色。


轮廓显示在元素的外部。与边框不同，它不会影响元素的大小。

影响范围: 轮廓主要用于视觉效果。即使轮廓显示出来，元素周围的空间也不会改变。

调整方法: 轮廓可以通过 outline-width, outline-color, outline-style 等属性进行设置。

input:focus {
outline-color: #3498db; /* 聚焦时更改轮廓的颜色 */
outline: none; /* 删除轮廓 */
}

此外，

您也可以使用 input:focus 更改 outline-color。

🔹 部分代码

<style>
  /* 输入框的装饰 */
  input {
    border-radius: 8px; /* 圆角 */
    padding: 10px 15px;  /* 内边距 */
    font-size: 16px;      /* 字体大小 */
    border: 2px solid #ccc; /* 边框 */
    transition: all 0.3s ease;
  }

  /* 输入框聚焦时的样式 */
  input:focus {
    border-color: #3498db; /* 聚焦时的边框颜色 */
    outline: none; /* 去除聚焦时的轮廓 */
  }
</style>

💻 完整代码

<input type="text" placeholder="请输入您的姓名" />

<style>
  /* 输入框的装饰 */
  input {
    border-radius: 8px; /* 圆角 */
    padding: 10px 15px;  /* 内边距 */
    font-size: 16px;      /* 字体大小 */
    border: 2px solid #ccc; /* 边框 */
    transition: all 0.3s ease;
  }

  /* 输入框聚焦时的样式 */
  input:focus {
    border-color: #3498db; /* 聚焦时的边框颜色 */
    outline: none; /* 去除聚焦时的轮廓 */
  }
</style>
已复制！

🎨 输入框设计的实用技巧

输入框的样式设计是直接影响用户体验的重要元素。通过合理结合 border-radius 和 padding，可以创建既美观又易用的表单。

📏 最佳尺寸关键点

padding: 10px 15px 是标准尺寸，但在移动设备上，将其增加到 padding: 12px 16px 可以方便用户点击。适当的 border-radius 范围是 4px 到 12px，应根据网站设计风格进行调整。

🌈 颜色设计变化

聚焦时的 border-color 可以根据网站配色方案更改，例如 #3498db（蓝色）、#4CAF50（绿色）或 #FF7043（橙色）。支持暗黑模式时，使用 @media (prefers-color-scheme: dark) 指定较亮的边框颜色。

✨ 交互效果增强

为 transition 属性添加 box-shadow，并在 input:focus 时设置 box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3)，可以获得更显著的聚焦效果。但动画应保持适度。

输入框设计应以功能性为优先，同时与网站整体设计系统保持协调。特别是在长表单页面中，保持样式一致性有助于提升可用性。

相关模板