原生select刚进页面就展开下拉菜单列表

可以使用 HTML 的 `autofocus` 属性和 JavaScript 的 `click()` 方法来实现该功能。

首先，在 `select` 元素上添加 `autofocus` 属性，让它成为页面加载后的默认焦点。

<select autofocus>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

然后，使用 JavaScript 在页面加载后触发 `click()` 方法，模拟用户点击下拉菜单，使其展开。

<script>
  window.onload = function() {
    document.querySelector('select').click();
  }
</script>

这样，当页面加载后，`select` 元素将成为默认焦点，并且下拉菜单列表将自动展开。

相关问题

原生select下拉菜单没有值为什么还会展示下拉菜单，如果没有值怎么隐藏

原生的 select 下拉菜单在没有选项时也会展示下拉菜单，这是浏览器默认的行为。如果你想在没有选项时隐藏下拉菜单，可以通过 JavaScript 来实现。

具体做法是，当 select 元素中没有选项时，动态设置其样式的 display 属性为 none，从而隐藏下拉菜单。代码示例如下：

var selectElement = document.getElementById("mySelect");
if (selectElement.options.length == 0) {
  selectElement.style.display = "none";
} else {
  selectElement.style.display = "block";
}

其中，"mySelect" 是你的 select 元素的 ID。通过判断选项的数量，如果为 0，就将 display 属性设置为 none，否则设置为 block。这样就可以动态地隐藏或显示下拉菜单了。

修改select下拉菜单的样式

要修改select下拉菜单的样式，可以使用CSS的样式表来实现。以下是一个简单的示例，可以让select下拉菜单的背景颜色和字体颜色变为红色：

<select style="background-color: red; color: white;">
  <option value="value1">选项1</option>
  <option value="value2">选项2</option>
  <option value="value3">选项3</option>
</select>

如果您想更改下拉箭头的样式，可以使用CSS中的伪元素::after，如下所示：

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 10px;
  font-size: 16px;
  background-color: #fff;
  border: none;
  outline: none;
}
select::after {
  content: "\25BC";
  font-size: 12px;
  color: #000;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

这个样式将隐藏原生的下拉箭头，并用一个更小的箭头替换它。您可以根据需要更改箭头的颜色、大小和位置。