[分享]css中带输入框的下拉框

今天我们来讲一下CSS中带输入框的下拉框，也称为选择框。 这种选择框可以让用户在选项中进行选择，或者根据自己的输入进行筛选。 首先，让我们来看一下HTML代码： 请选择喜欢的水果: 在...

今天我们来讲一下CSS中带输入框的下拉框，也称为选择框。 这种选择框可以让用户在选项中进行选择，或者根据自己的输入进行筛选。
首先，让我们来看一下HTML代码：

 <label for="fruits">请选择喜欢的水果:</label>
  <input type="text" id="fruits" list="fruitsList" placeholder="输入或选择">
  <datalist id="fruitsList">
    <option value="苹果">
    <option value="橙子">
    <option value="香蕉">
    <option value="草莓">
    <option value="葡萄">
  </datalist> 

在上面的代码中，我们使用了``标签来创建输入框，``标签来创建下拉框中的选项。``标签是为了增加可访问性（accessibility）。
接着，我们来看一下CSS的代码：

 input[type="text"] {
    padding: 10px;
    border: none;
    border-bottom: 2px solid #ccc;
    width: 200px;
    font-size: 16px;
    outline: none;
  }
  
  datalist {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  option {
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
  }
  
  option:hover {
    background-color: #f4f4f4;
  } 

在上面的代码中，我们设置了``标签的样式，包括边框、内边距、字体大小等。``标签和``标签的样式是为了去掉默认的样式并增加一些样式来美化选择框。
最后，我们来看一下效果图：
使用CSS中带输入框的下拉框，可以让用户更方便地选择选项。这种选择框可以用于用户注册、选择商品、筛选数据等许多方面。希望这篇文章能够对你有所启发，谢谢！