如何使选择输入在所有平台上的所有浏览器中看起来都一样？答案

【问题标题】：How to make select inputs look the same in all browsers on all platforms?如何使选择输入在所有平台上的所有浏览器中看起来都一样？
【发布时间】：2011-06-08 08:31:37
【问题描述】：

我正在解决一个问题，以使选择输入在所有浏览器中看起来都相同（Mac 上的 Chrome 和 Safari 呈现不同）如何做到这一点？

【问题讨论】：

你没有。它与用户的期望相冲突。

标签： html css macos select input

【解决方案1】：

ONLY 让它们现在看起来一样的方法是隐藏原始输入，并用适当样式的 html 等效项（上帝为大 Flash 对象）替换它们，这将充当代理，将功能传递给隐藏的输入。

这可以通过 JavaScript 自动化。但那将是错误。您不应该对网页的操作系统样式元素强制使用不同的外观。它与许多可用性和可访问性实践相冲突。

所以，唯一的办法是让你的设计足够灵活，以支持网页上不同外观的控件元素，并为不同的浏览器使用不同的样式集，以简化样式的调整（目前没有输入在应用相同样式规则的所有浏览器上的外观和行为都相同）。

【讨论】：

【解决方案2】：

不幸的是，生活有点糟透了。等到您需要为文件输入设置样式...现在这很有趣！

【讨论】：

【解决方案3】：

如果你不介意使用 js，你可以简单地设计你自己的外观（一个 jpg img，它甚至可以是与原始选择元素相同的 img，或者如果你希望你可以在 css 中建模它的一部分）然后在该图像顶部放置一个 div，该 div 将包含选择元素通常包含的文本

<div id="selectTxt" >

然后在其上设置另一个 div，其中包含 select 元素。

<div id="transparentSelect" class="transparent"> 
<select id="selectCar" name="selectCar">
      <option>Volvo</option>
      <option>Saab</option>
      <option>Mercedes</option>
      <option>Audi</option>
    </select>  
</div>

现在的诀窍是将选择元素的不透明度设置为零你可以通过添加一个透明的类来做到这一点然后将类应用到 div

.transparent
{
   filter:alpha(opacity=0); 
   -moz-opacity: 0; 
   opacity: 0; 
}

现在该元素已隐藏，但当您单击它时，列表仍会显示。所以列表总是看起来像浏览器中的默认列表

现在每次点击选择时使用js提取选择值并将 selectTxt div 的内部 html 设置为其值。这样你就可以在你想要的图像上获得选择的文本

你可以在css或js中使用悬停效果使图像动画

我还做了一个在所有浏览器中看起来都一样的选择，但是当您直接单击箭头时它不起作用... 所以它是一个劣质版本，但如果你想在这里看看它是

http://jsfiddle.net/fiddlerOnDaRoof/LM73V/

它也缺少箭头图像，但您可以从浏览器打印屏幕

祝你好运

【讨论】：

【解决方案4】：

您应该应用 CSS 来重置样式（不仅仅是输入，这是所有元素的强烈推荐做法，以便您的页面在所有浏览器中看起来几乎相同）有很多，只需 google 一下，对于例如this one，然后应用您想要的样式（边框颜色和宽度、背景等...）看看this tutorial 如何设置表单元素的样式

【讨论】：

是的，它适用于某些浏览器，但在 Mac 上看起来仍然是 Mac'kish :)