Question

我正在解决一个问题，让所有浏览器中的选择输入看起来都一样（Mac上的Chrome和Safari会以不同的方式呈现它们）怎么做？

Answer 1

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

这可以通过JavaScript实现自动化。但那将是错误。您不应该强制对网页的OS样式元素进行不同的查看。它与许多可用性和可访问性实践相冲突。

因此，唯一的方法是让您的设计足够灵活，以支持网页上不同的控制元素，并为不同的浏览器使用不同的样式集，以简化样式的调整（目前没有输入在应用相同样式规则的所有浏览器上看起来和行为相同。）

Answer 2

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

Answer 3

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

<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>

现在的诀窍是将select元素不透明度设置为零您可以通过添加透明类来添加然后将该类应用于div

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

现在元素被隐藏但是当你点击它时，列表仍然会显示出来。所以列表总是看起来像浏览器中的默认列表

现在使用js每次单击选择时都会提取选择值并将selectTxt div的内部html设置为其值。这样，您可以在所需图像的顶部获得选择文本

您可以使用css中的悬停效果或使用js

对图像进行动画处理

我也在所有浏览器中制作一个看起来相同的选项，但是当你直接点击箭头时它不起作用...... 所以它是一个劣质的版本，但如果你想在这里看它是

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

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

祝你好运

Answer 4

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

如何在所有平台上的所有浏览器中使选择输入看起来相同？

4 个答案: