Firefox CSS选择OPTION样式

时间:2013-04-04 21:17:48

标签: css firefox select cross-browser option

从我看来,你不能设置样式框,因为它是特定于操作系统的,除非你用javascript编辑,否则无法破解...

我的例子在这里:

http://www.promilitarybusinessnetwork.com/continueSearch.asp?categoryID=1270

我今天刚刚重新整理了这个页面。从以前的地方开始的巨大改进。

在Chrome和Safari中看起来很完美...... Firefox给了我一些问题。

  1. 在Firefox中,文本不是居中的。
  2. 我不能使用-moz-appearance:none;摆脱右边的方框。
  3. 由于我的chrome for chrome和safari,这些项目变为白色。这仅适用于SELECT文本,但在我首选的浏览器中仍然保持黑色。在Firefox中,它变成白色......
  4. 我该怎么做才能改变这个......?

    .select{
    width:361px;
    height:44px;
    color:#FFF;
    font-size:14px;
    padding-left:10px;
    font-weight:bolder;
    font-family:Verdana, Geneva, sans-serif;
    background-image:url(images/baseselect_up.png);
    display:block;
    position:absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    }
    .select:hover{
    background-image:url(images/baseselector_down.png);
    }
    
    <form method="post" action="newSearch.asp">
    <select class="select" name="baseID" >  
    
    <% do while not BaseRs.eof %>
    <option value="<%=baseRs("baseID")%>"><%=baseRs("base")%></option>
    loop %>                                         
    </select> <br><br>
    <input type="hidden" name="CategoryID" value="<%=sqlFilter(request("categoryID"))%>">
    <div style="position:relative; top:14px; left: 264px;"><input type="submit"     value="Continue >>>"></div>
    </form>
    

    有什么方法可以编辑Mozilla以使OPTION文本变白,并隐藏SELECT外观和中心文本......?

    或者我因为每个操作系统的运行方式而搞砸了?

    我在办公室里运行MAC,在家里运行PC,所以我还没有看到我的网站在电脑上看到我今天所做的这些新改变。

3 个答案:

答案 0 :(得分:0)

基于Javascript的SELECT / OPTION替换更加可靠和灵活,特别是如果您希望跨浏览器保持一致性。你会发现使用原生样式和标签你无法做到的事情。

答案 1 :(得分:0)

实际上,如果你不想使用额外的插件,最简单的方法就是使用这样的代码:

<label for="upload" class="upFile">Attach file</label>
<input style="display: none;" type="file" id="upload" accept="image/*" name="Change">

您可以删除内联css ofc,也可以删除样式标签以查看您想要的内容。

答案 2 :(得分:-1)