css 制作输入框

基础输入框样式

使用 input 标签创建基本输入框，并通过 CSS 设置宽度、高度、边框和圆角等基础样式：

.input-basic {
  width: 200px;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

悬浮和聚焦效果

通过 :hover 和 :focus 伪类增强交互体验，改变边框颜色并添加阴影：

.input-hover:focus {
  border-color: #4a90e2;
  outline: none;
  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

占位符样式

使用 ::placeholder 伪元素自定义占位文本的样式：

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

禁用状态

通过 :disabled 伪类设置输入框禁用时的样式：

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

高级样式示例

结合过渡动画和图标创建更复杂的输入框：

.input-advanced {
  width: 250px;
  padding: 10px 15px 10px 40px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background-image: url('search-icon.png');
  background-position: 10px center;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}

.input-advanced:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
}

响应式设计

使用媒体查询确保输入框在不同设备上的适应性：

@media (max-width: 768px) {
  .input-responsive {
    width: 100%;
    margin-bottom: 10px;
  }
}

验证状态样式

通过 :valid 和 :invalid 伪类提供视觉反馈：

.input-valid:valid {
  border-color: #4caf50;
}

.input-invalid:invalid {
  border-color: #f44336;
}

以上代码可直接复制到 CSS 文件中使用，或通过在线编辑器实时预览效果。根据项目需求调整颜色、尺寸等参数，实现定制化设计。