基本上我有一个带有修饰符下拉列表的文本框。我想在选择时显示当前选择的图标。当前设置（使用UNICODE）的问题在于图标并不总是显示，例如在谷歌浏览器上（除非已安装特定字体）。
例如，请看小提琴： https://jsfiddle.net/q5eLLu2h/
<select class="squareDropdown" id="da" name="da">
<option value="AND">➕ AND</option>
<option value="EXCEPT">➖ EXCEPT</option>
<option value="OR"><b>O</b> OR</option></select>
<input class="textArea" id="d" name="d" placeholder="d" type="text" />
<br>
<br>
<br>
<select class="squareDropdown" id="ca" name="ca">
<option value="OR"><b>O</b> OR</option>
<option value="AND">➕ AND</option>
<option value="EXCEPT">➖ EXCEPT</option>
</select>
<input class="textArea" id="c" name="c" placeholder="c" type="text" />
有人对我能做什么有任何建议吗？要么是显示unicode图标的方法（比如通过强迫人们下载它们？），要么是将图片或图像放入选择框或其他任何内容的简单方法。安装了Jquery UI，我可以用它做什么吗？
谢谢
答案 0 :(得分：2)
选项很难风格化。
基本原因是他们正在进入操作系统进行生成，而不是像大多数其他网站HTML元素那样仅通过浏览器生成。
这就是为什么文件上传表单字段提交＆＃39;按钮不遵循与表单上任何其他提交按钮相同的规则。
这里有一些更详细的about limited and inconsistent possibilities和一个证明<option> can't have any children的问题（不幸的是，这反过来阻止了psuedo元素的工作，因为伪造的元素就像DOM节点一样呈现）。
所有这些意味着使用图标字体不会起作用，因为您需要仅使用带有图标的位来定位，而您只能使用额外的子元素。
使用JQuery
有很多方法可以模仿选择选项表单字段和各种javascript插件，这些插件可以为您提供更多控制，但是，它们有一个重要的警告。标准选择元素带来了所有额外的可用性和可访问性功能（如键盘焦点和操作）javascript插件编写者不必考虑，所以要小心使用。
值得记住的是，当您使用JQuery替换复杂功能时，您在测试/开发中会遇到相当多的开销 - 选择元素只适用于所有浏览器，而不需要实际的功能测试。如果您确实关注所有辅助功能点，这将更加可观。
然而，MDN的文章确实认为这是最好的方法，并为解决方案列出了一些好的插件，我可以使用MDN来考虑我上面提到的所有重要内容。为了链接腐烂，以下是他们建议链接到产品的三个中的两个：
（请注意，我还没有尝试过这些，我只是信任Mozilla！）
<强>的Unicode
您正在尝试在选项标签中使用unicode。这应该有效，如果您执行以下操作，则无需强制下载用户：
但是，您只会获得角色，而不会使用可设计的图标，并且您可能会遇到网页保护或专有字体。
此jsfiddle here使用网络安全font-family: sans-serif进行演示，并使用big list of those that are commonly supported
最后
对于小选项集radio buttons are probably better。用户可以立即看到可用的选项，而不是每次都打开它们（更好的可学习性，更快的认知）;此外，他们可以进行所需的选择，或者每次只需点击一下即可更改所需的选择。在UX.SE的那些人讨论了进一步使用的内容，raising other points。
如果您考虑<select>是否是最佳选择，那么您的所有问题都可能会消失。