css快速文本下拉选择输入框

最近在学习Web开发过程中，我们经常会用到下拉选择输入框，而CSS可以让这个过程更加快捷。下面是一些CSS代码，让您可以轻松地创建一个快速文本下拉选择输入框。

select {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border-radius: 4px;
   Box-sizing: border-Box;
}
option {
   background-color: #f6f6f6;
   color: #000;
   padding: 12px 20px;
   display: block;
}

select:hover {
   background-color: #ddd;
}

select:focus {
   border: none;
   outline:none;
   background-color: #f6f6f6;
}

代码说明：

select： 这段代码定义了整个下拉选择输入框的样式。

option：这段代码则定义了下拉菜单中每个选项的样式。

hover：当用户将鼠标悬停在下拉菜单上时，菜单将变成灰色。

focus：当用户单击下拉菜单时，菜单的背景色将更改，以指示该元素具有焦点。

通过使用以上代码，您可以轻而易举地创建一个快速文本下拉选择输入框，这对于Web开发人员来说是非常有用的。