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

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

来源

2011-01-13 web_freak

你没有。它与用户期望相冲突。 – deceze 2011-01-13 08:12:15

-1

你应该申请一个CSS重置样式（不只是输入，这是所有元素的极力推荐的做法，使你的网页看起来几乎相同的所有浏览器）有很多，只是谷歌了一下，例如this one，然后应用所需的样式（边框颜色和宽度，背景等）承担了如何样式表单元素

来源

2011-01-13 08:15:56 maid450

是的，它适用于某些浏览器，但在Mac上时，外观仍然Mac'kish :) – 2011-01-25 10:07:02

的ONLY方式看看this tutorial，使它们看起来相同的权利现在将隐藏原始输入，并将其替换为适当样式的html等价物（上帝的forbig Flash对象），它将充当代理，将功能传递给隐藏的输入。

这可能用JavaScript实现自动化。但那将是错误。你不应该强迫对网页的OS样式元素进行不同的观察。它与很多可用性和可访问性实践相冲突。

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

来源

2011-01-13 12:27:38 bstst

不幸的是，生活只是有点吮吸这一个。等待，直到你需要创建一个文件输入...现在，这是一个有趣的！

来源

2011-01-13 15:33:38 tybro0103

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

<div id="selectTxt" >

然后设置最重要的是另一种分度，它里面的选择元素中的文本。

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

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

好运

来源

2012-05-04 13:54:05 Xitcod13

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

回答

相关问题