为啥当我按下刷新时，选择中的下拉箭头会改变外观和移动位置？

Posted 2023-03-05

【中文标题】为啥当我按下刷新时，选择中的下拉箭头会改变外观和移动位置？

【英文标题】：Why does drop down arrow in select change appearance and shift positon when I press refresh?为什么当我按下刷新时，选择中的下拉箭头会改变外观和移动位置？

【发布时间】：2019-12-23 05:54:09

【问题描述】：

为什么刷新网页时下拉箭头会改变外观？从而在两个盒子上移动内容一秒钟。 （选择一个类别）（选择一个国家）

这里是the link！

下拉箭头 （选择一个类别） 和 （选择一个国家）在页面刷新时更改。

select 
  width: 100%;
  padding: 1.5rem;
  border-radius: .3rem;
  background-color: #fff;
  box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, .1);
  border: .1rem solid rgba(0, 0, 0, .15);


select.small 
  padding: .9rem;


select.selectized 
  display: block !important;
  visibility: hidden;
  position: absolute;
  z-index: -9999;


.selectize-control 
  display: inline-block;
  width: 100%;


.selectize-control .selectize-input 
  transition: .3s ease;
  border-radius: .3rem;
  font-weight: 500;
  padding: 1.7rem;
  height: auto;
  background-image: none;
  background-color: #fff;
  position: relative;
  line-height: inherit;

【参考方案1】：

这是因为 selectize 库是异步加载的（例如，它不会立即应用）。

所以浏览器做的第一件事就是解析 html，然后加载 CSS。此时，浏览器呈现网页。由于您选择的组件是<select> 标签，因此浏览器会按原样呈现它们。在呈现初始页面的同时，浏览器获取 javascript 文件。一旦完成加载它们，它将执行脚本 - 这就是应用 selectize 并将 select 下拉列表替换为其自定义 JS 实现的时候。

那么我们该如何解决这个问题呢？好吧，这取决于您使用的很多库（而且我不熟悉 Selectize，所以我只会给您这个概念 - 您需要弄清楚如何使用您正在使用的库进行此操作使用）

您当前实施的好处是它是“渐进式增强”。这意味着如果 JavaScript 文件没有加载，选择可以正常工作；或缓慢加载（例如在移动设备上）。要保留此功能，您唯一可以做的就是使用 CSS 为选择设置样式，以使它们看起来尽可能接近 Selectize。现在你的 CSS 规则是针对 .selectize-control 和其他库特定的类名。您可以尝试在 Selectize 加载之前直接在 HTML 中应用这些类；或通过不定位选择类来设置您的选择。