使用 list/datalist 输入：删除 Chrome 版本 91 中的下拉箭头

Question

我有以下 Razor/HTML 代码来生成带有 list/datalist 的输入字段：

@Html.EditorFor(model => model.BarcodeField.Value, new { htmlAttributes = new { @class = "form-control inputBarcodeField", @name = "edtBarcodeField", @id = "edtBarcodeField", @maxlength = "10", @list = "lastScannedBarcodes" } })
<datalist id="lastScannedBarcodes"></datalist>

结果 HTML 如下所示：

    <input class="form-control inputBarcodeField text-box single-line valid focus" id="edtBarcodeField" list="lastScannedBarcodes" maxlength="10" name="BarcodeField.Value" type="text" value="">
    <datalist id="lastScannedBarcodes"><option value="9900000000"></option></datalist>

默认情况下，Chrome 会在数据列表填满选项后将箭头放入输入框中。在 Chrome 90 及更低版本中，我可以使用以下 CSS:

隐藏此箭头

/* this is to hide the ugly dropdown arrow for the last scanned barcodes */
.inputBarcodeField::-webkit-calendar-picker-indicator {
    display: none;
}

但是自从 Google 发布 Chrome 版本 91 以来，用户抱怨箭头又回来了。我可以确认这一点。

Chrome 90（好的！）：

Chrome 91（不好）：

如何去掉Chrome91中的这个箭头？

Answer 1

尝试使用 !important :

.inputBarcodeField::-webkit-calendar-picker-indicator {
  display:none !important;
}

<input class="form-control inputFieldGrading inputBarcodeField text-box single-line valid focus" id="edtBarcodeField" list="lastScannedBarcodes" maxlength="10" name="BarcodeField.Value" type="text" value="">
    <datalist id="lastScannedBarcodes"><option value="9900000000"></option></datalist>

使用 list/datalist 输入：删除 Chrome 版本 91 中的下拉箭头

Input with list/datalist: Remove dropdown arrow in Chrome version 91

html

css

google-chrome