html - CSS 选择框在某些计算机/浏览器上看起来不同

Question

html 中的选择框在某些计算机/浏览器上看起来不同。在别人的电脑上，他的 google chrome 框看起来像这样，这应该是标准的:

但在我的电脑上，谷歌浏览器看起来像这样:

我已经清除了我的 chrome 浏览历史记录。当我在我的电脑上使用 Edge 时，它​​也会显示第一张图片。如何让它在我的电脑上使用 chrome？

这是选择框的CSS:

.select2-container {
  display: block;
  max-width: 100% !important;
  width: auto !important;
}

.select2-container .select2-selection--single {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  height: 48px;
  outline: none;
  position: relative;
}

Answer 1

您可以制作自己的设计，但必须在所有网络浏览器中将外观设置为无，然后指定样式。

用向下箭头图标替换右侧的绿色框。你可以找到一些here on icon8.com

试试这段代码:

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  padding: 7px;
  border-radius: 0;
  background: url('https://via.placeholder.com/15/0f2') 95% no-repeat #fafafa;
}

select::-ms-expand {
  display: none;
}

<select>
  <option>Option1</option>
  <option>Option1</option>
  <option>Option1</option>
  <option>Option1</option>
</select>