css下拉框 输入框样式

CSS下拉框和输入框样式的设计在网页设计中起到至关重要的作用。通过一些简单的CSS代码的调整，可以让网站的下拉框和输入框看起来更加美观，用户体验也会更好。

/* CSS下拉框样式 */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* CSS输入框样式 */
input[type="text"] {
  border: none;
  border-bottom: 2px solid #ccc;
}

input[type="text"]:focus {
  border-bottom: 2px solid #007bff;
  outline: none;
}

/* CSS下拉框与输入框的组合 */
.dropdown input[type="text"] {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.dropdown .dropdown-content {
  width: 100%;
  overflow-y: auto;
  max-height: 200px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

.dropdown .dropdown-content a {
  color: #333;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown .dropdown-content a:hover {
  background-color: #007bff;
  color: #fff;
} 

上述CSS代码中，首先我们针对CSS下拉框进行了样式的设计，使得用户在鼠标移动到下拉列表时，下拉框内容可以自动显示。其次，对于输入框样式，我们给输入框加入了简约的边框样式，并且在用户输入时，输入框的边框颜色会自动改变。最后，我们使用了组合技巧，在CSS下拉框和输入框样式的基础上进行组合，使得用户在输入信息时，可以直接从下拉框中选择合适的内容，从而提高用户的输入效率。