HTML选择选项文本等宽字体

Question

HTML选择选项文本等宽字体

6

我正在尝试让下拉选项使用等宽字体，这样当您单击下拉时它们就会垂直对齐。我试图将代码左对齐，然后加上一个破折号和一段描述。我使用编码空格添加选项，以便在破折号之前每个选项具有相同数量的字符，但它们仍然没有对齐。我尝试了Courier New和等宽字体。我可以看出它正在使用这些字体，但它们仍然没有对齐。以下是代码：

<!DOCTYPE html>
<html>
<head>
 <title>font test</title>
 <style>
 select, option{
  font-family:monospace, monospace;
 }
 </style>
</head>
<body>
 <form>
  <select name=SOURCECODE>
   <option value="" selected>Select a Option</option>
   <option value="A">A&nbsp;&nbsp;&nbsp;&nbsp;- TEST A</option>
   <option value="AB">AB&nbsp;&nbsp;&nbsp;- TEST AB</option>
   <option value="ABC">ABC&nbsp;&nbsp;- TEST ABC</option>
   <option value="ABCD">ABCD&nbsp;- TEST ABCD</option>
   <option value="A">A&nbsp;&nbsp;&nbsp;&nbsp;- TEST A</option>
   <option value="AB">AB&nbsp;&nbsp;&nbsp;- TEST AB</option>
   <option value="ABC">ABC&nbsp;&nbsp;- TEST ABC</option>
   <option value="ABCD">ABCD&nbsp;- TEST ABCD</option>
  </select>
 </form>
</body>
</html>

有没有办法让这个工作起来？

请注意，这似乎只是Firefox的问题。

- user999684

在Chrome中看起来似乎很好。 - j08691

2

您应该考虑使用<optgroup>。 - Brad

1

我认为这在所有浏览器中都不起作用。最好的解决方案是创建一个自定义选择器，这样您就可以使用自定义字体系列。 - Vig

optgroup不是解决方案，因为每个optgroup都有自己的选项。我根据研究所做的尝试无法使其工作，但是我使用的是FF。我在Chrome中尝试了一下，它也很好地工作了，在IE中也是如此。如果有人有FF的解决方案，请告诉我。 - user999684

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tatranskymedved · Accepted Answer

通过阅读多篇文章，看起来这是Mozilla Firefox的一个bug，目前（截至2018年10月5日），字体样式实际上无法设置。我已经在Windows 10（x64）上测试了59.0.2和60.0，两者都有同样的问题。

5年前的错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=910022
11个月前的错误报告（关于背景颜色）：https://bugzilla.mozilla.org/show_bug.cgi?id=1376443
关于同一主题的SO问题：CSS Font-Family Support Dropped for <SELECT> in Firefox?

我还注意到关于option标签的写作：

Firefox拒绝将背景颜色应用于下拉菜单中的选项标签。

自Firefox 48及以上版本，在Windows 7、8.1和10（所有x64）上出现问题

在Windows XP 32位上的Firefox 48及以上版本未遇到该问题

通常可以解决的解决方案（但在该情况下不起作用）：

将字体系列更改为等宽字体
添加制表符（	）和<pre></pre>标签
如Kelvin Samuel所指出，创建自己的自定义选择器可能会起作用（例如，按照本教程进行操作，请参阅下面的工作解决方案）

来自教程的可行自定义选择器：

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
  });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

 /*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: monospace;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

<!--surround the select box within a "custom-select" DIV element.
Remember to set the width:-->
<div class="custom-select" style="width:200px;">
  <select>
   <option value="" selected>Select a Option</option>
   <option value="A">A&nbsp;&nbsp;&nbsp;&nbsp;- TEST A</option>
   <option value="AB">AB&nbsp;&nbsp;&nbsp;- TEST AB</option>
   <option value="ABC">ABC&nbsp;&nbsp;- TEST ABC</option>
   <option value="ABCD">ABCD&nbsp;- TEST ABCD</option>
   <option value="A">A&nbsp;&nbsp;&nbsp;&nbsp;- TEST A</option>
   <option value="AB">AB&nbsp;&nbsp;&nbsp;- TEST AB</option>
   <option value="ABC">ABC&nbsp;&nbsp;- TEST ABC</option>
   <option value="ABCD">ABCD&nbsp;- TEST ABCD</option>
  </select>
</div>