0

矢印の代わりに画像を持つドロップダウンがあります。しかし、クロスブラウジングの問題があります。クロムでは問題なく表示されますが、モジラでは画像が背面に表示されます。スクリーンショットを添付します。

ドロップダウン HTML

<td align="right">
 <div class="blue" style="float: left;">
    <div class="lightblueHeading" style="text-align: left;">No. Of Guests</div>
    <div>
        <div class="styled-select">
            <asp:DropDownList ID="ddlNoOfGuest" runat="server" Style="width: 165px;"></asp:DropDownList>
        </div>
    </div>
 </div>
</td>

クラス

.styled-select
{
    overflow: hidden; /*height: 24px;     background: url(../images/dropdown_icon.png) no-repeat right;*/
    background: url(../images/signup-dropdown_icon.png) no-repeat right;
    background-color: white;
    width: 100%;
}
.styled-select select
{
    background: transparent; /*border: 1px solid #e8e9e9;*/
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    visibility: hidden;

}

Chrome ドロップダウン

Mozilla ドロップダウン

4

2 に答える 2

0

タグopacity:0のプロパティとして使用します。select

于 2013-02-21T15:31:59.923 に答える
0

あなたが試みているアプローチは、すべてのブラウザーで完全に互換性があるわけではなく、ブラウザーの互換性の問題と、問題をどのように管理したかという問題に直面していますが、市場には多くのバージョンの IE があるため、将来的にはブラウザーの互換性の問題に直面する可能性があります。みんなのお気に入りは IE7 です。 . したがって、問題を解決するには、以下のような jquery ベースのプラグインを使用することをお勧めします。

  1. http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
  2. http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
于 2013-02-21T15:53:19.320 に答える