当前位置：首页 > CSS

css 制作输入框

2026-01-08 19:35:44CSS

基础输入框样式

使用 input 或 textarea 元素创建输入框，通过 CSS 设置边框、圆角、内边距和背景色：

.input-basic {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  background-color: #fff;
  font-size: 14px;
}

悬浮与聚焦效果

通过 :hover 和 :focus 伪类增强交互体验：

.input-hover:focus {
  border-color: #4d90fe;
  box-shadow: 0 0 5px rgba(77, 144, 254, 0.5);
  outline: none;
}
.input-hover:hover {
  border-color: #aaa;
}

占位符样式定制

使用 ::placeholder 伪元素修改 placeholder 文本样式：

css 制作输入框

.input-placeholder::placeholder {
  color: #999;
  font-style: italic;
}

禁用状态样式

通过 :disabled 伪类设置禁用状态下的视觉效果：

.input-disabled:disabled {
  background-color: #f5f5f5;
  color: #a0a0a0;
  cursor: not-allowed;
}

高级输入框设计

结合阴影、过渡和渐变背景创建高级效果：

css 制作输入框

.input-advanced {
  border: none;
  background: linear-gradient(to bottom, #f9f9f9, #fff);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  padding: 10px 15px;
}
.input-advanced:focus {
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

响应式输入框

使用视窗单位确保在不同设备上的适应性：

.input-responsive {
  width: 90vw;
  max-width: 500px;
  padding: 12px;
  font-size: calc(14px + 0.5vw);
}

带图标的输入框

通过 background-image 或伪元素添加图标：

.input-with-icon {
  padding-left: 35px;
  background-image: url('search-icon.png');
  background-repeat: no-repeat;
  background-position: 10px center;
}