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

Question

html中的选择框在某些计算机/浏览器上看起来有所不同。在其他人的计算机上谷歌浏览器的盒子看起来像这样，这应该是标准的：

但是在谷歌浏览器的计算机上，它看起来像这样：

我已经清除了我的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

每个浏览器都有不同的默认样式。所以chrome上的选择框在firefox上可能看起来不同，正如你所发现的那样。

要解决此问题，您需要重置默认样式。

使用样式表，例如Normalize.css Link

Answer 2

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

用向下箭头图标替换右侧的绿色框。你可以找到一些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>