css 制作输入框

基本输入框样式

使用 input 元素的基础样式，设置边框、内边距和圆角：

input[type="text"] {
  width: 200px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

悬停和聚焦效果

添加交互状态样式提升用户体验：

input[type="text"]:hover {
  border-color: #999;
}

input[type="text"]:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

带图标输入框

使用 background 属性添加图标：

.search-input {
  padding-left: 32px;
  background-image: url('search-icon.png');
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px;
}

浮动标签效果

通过相邻兄弟选择器实现标签动画：

.input-group {
  position: relative;
}

.input-group input {
  padding-top: 16px;
}

.input-group label {
  position: absolute;
  top: 8px;
  left: 12px;
  color: #999;
  transition: all 0.3s;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  top: 2px;
  left: 8px;
  font-size: 12px;
  color: #4285f4;
}

禁用状态样式

设置禁用输入框的视觉反馈：

input[type="text"]:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

响应式输入框

使用媒体查询适应不同屏幕尺寸：

input[type="text"] {
  width: 100%;
  max-width: 400px;
}

@media (max-width: 600px) {
  input[type="text"] {
    padding: 10px 15px;
    font-size: 16px;
  }
}

验证状态样式

根据验证状态显示不同样式：

input[type="text"]:valid {
  border-color: #4CAF50;
}

input[type="text"]:invalid {
  border-color: #F44336;
}