html - Safari 选择下拉菜单显示空字段

Question

我尝试了以下解决方案但没有成功:出于某种原因，Safari 在选择框中为空字段添加了额外的行。在 Chrome 和 Firefox 中没问题

这是一个例子:http://www.ninesixty.co.nz/jazzbags/pullbows/

我尝试了以下解决方案，但没有成功:

select [value=""] {     display: none; }

select:empty {   display:none; }

Answer 1

我认为您无法使用 CSS 完成此操作，因为 Safari 对下拉菜单使用覆盖层，但您可以使用 JavaScript 完成此操作

var selectOption = document.querySelectorAll('#slct option');
for (var i = 0; i < selectOption.length; i++) {
  var item = selectOption[i];
  if (item.innerHTML === "") {
    item.remove();
  };
}