时间戳

首页 > 解决方案 > Chrome 最新更新下拉修复

javascript - Chrome 最新更新下拉修复

问题描述

有没有人注意到 chrome 83 最新的表单输入元素，好吧，选择元素内的下拉菜单（选项）看起来很奇怪？请看我下面的图片。Chrome 版本 83.0.4103.106（官方版本）。

在 Chrome 版本 83.0.4103.106（官方版本）上截断了奇怪的下拉菜单

我没有为该选项添加任何 CSS。但是我为该下拉列表添加了一个选择样式，即：

select {
 -webkit-appearance: none;
 padding: 0 .6em;
 height: 40px;
 line-height: 40px;
 font-weight: bold;
}

在 Edge 和 Firefox 上打开时，下拉列表看起来很好，在更新 chrome 浏览器之前很好。但是现在由于浏览器在选择选项上有这个黑色粗体边框，看起来选项本身在每一侧和底部都有一些填充，但在顶部没有。

<select name="input_1" id="input_3_1" class="medium field_select" aria-required="true" aria-invalid="false">
 <option value="" selected="selected" class="field_placeholder">My Enquiry</option>
 <option value="General Enquiry">General Enquiry</option>
 <option value="Price Information">Price Information</option>
 <option value="Scheduling an information">Scheduling an information</option>
 <option value="Rates &amp; Fees">Rates &amp; Fees</option>
 <option value="Similar Properties">Similar Properties</option>
</select>

我尝试添加 outline: none !important 但这不起作用。它已经在使用 box-sizing: border-box;

唯一的方法是通过 js 使用自定义选择，但这需要更多时间来重新设置样式，所以我敢打赌，我能做的最好的方法就是使用浏览器的内置表单元素。

请帮忙，谢谢！

如果图像不清楚：https ://pasteboard.co/JdL8cnx.png

更新了选择结构

标签： javascripthtmlcssformsgoogle-chrome

解决方案

推荐阅读