当前位置：文江博客话题详情

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

发布于 2024-10-11 18:33:21 字数 72 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

粉红×色少女 2024-10-18 18:33:21

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

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

所以，唯一的方法就是让你的设计足够灵活，以支持网页上不同外观的控制元素，并且针对不同的浏览器使用不同的样式集，以方便样式的调整（目前没有输入看起来像并在应用相同样式规则的所有浏览器上执行相同的操作）。

回复收藏 0 原文

待天淡蓝洁白时 2024-10-18 18:33:21

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

回复收藏 0 原文

困倦 2024-10-18 18:33:21

如果您不介意使用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>

现在的技巧是将选择元素的不透明度设置为零
您可以通过添加透明类来完成此操作
然后将类应用到 div

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

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

现在每次点击选择时都使用js来提取选择值
并将 selectTxt div 的内部 html 设置为其值。
通过这种方式，您可以在您想要的图像顶部获得选择的文本

，您可以使用 css 或 js 中的悬停效果使图像动画化，

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

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

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

祝您好运

if you dont mind using js you can simply design your own look (a jpg img it can even be the same img as the original select element or if you wish you can model parts of it in css)
Then place a div on top of that image that div will contain the text which select element would usually contain

<div id="selectTxt" >

then set another div on top of that with the select element inside it.

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

Now the trick is to set the select element opacity to zero
you can do this by adding by adding a class transparent
and then applying the class to the div

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

now the element is hidden but when you click on it the list will still show up.
So the list will always look like the default list in the browser

now use js to extract the select value every time you click on the select
and set the inner html of selectTxt div to its value.
This way you get the text of the select on top of an image you want

you can make the image animated with the hover effect in css or with js

I also make a select that looks the same in all browsers but it doesnt work when you click directly on the arrow...
so its an inferior version but if you wish to look at it here it is

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

it also lacks the arrow image but you can print screen that from your browser

good luck

回复收藏 0 原文