0

IE と firefox に問題があります。私が達成したかった効果はクロムでのみ機能すると思います。問題は、下の図のように、ドロップダウンがクロムで完全に表示されることです。正しいドロップダウン

そしてFirefoxでは/つまり、次のように表示されます： ここに画像の説明を入力

したがって、基本的にはデフォルトのドロップダウン矢印を保持します。

ここにコードがあります：

      <select name="gender">
       <option value="">Gender</option>
       <option value="male">Male</option>
       <option value="female">Female</option>
      </select>

そしてCSS：

input {
height: 67px;
width: 400px;
border:none;
background:url(../_images/butt-reg.png) no-repeat;
padding: 0 20px;
margin: 0 10px 20px 10px;
text-align:left;
vertical-align: middle;
font-size: 18pt;
color: #666;

それを整理するための簡単な解決策があると確信していますが、いくつか試してみましたが、何も機能しませんでした。前もって感謝します。

4

3 に答える 3

1

CSS のみを使用して選択ボックスのスタイルを設定するをご覧ください。

于 2012-08-15T10:53:52.703 に答える
1

ここを見てください：http://result.dabblet.com/gist/3358882/5eeb2b8d4fe6adf243c5c463111d367c7651a029

親ノードの after-pseudo-element (この場合は label-element) を使用して、ドロップダウン ボタンをカスタム ボタンでオーバーレイしようとしました。CSS プロパティ pointer-events により、ピンク色のボタンをクリックして選択コントロールを開くことができるようになります。

于 2012-08-15T11:02:07.970 に答える
1

CSSのみを使用してこのクロスブラウザーを実行することは、(不可能ではないにしても) 非常に困難です。あなたの要素をスタイルするために私が考えることができる唯一の方法は、それをシミュレートすることです. まず、選択した値を持つ非表示のテキストを挿入します。dropdown-要素をシミュレートする HTML の例を次に示します。<select>inputselect

<div class = "select">
    <div class = "curVal">Gender</div><div class = "arrow">V</div>
    <div class = "choices">
        <div class = "choice">Male</div>
        <div class = "choice">Female</div>
        <div class = "choice">Refuse to answer</div>
    </div>
</div>

それをスタイルしましょう：

body {
    font-family: 'Arial', Helvetica, Sans-Serif;        
}
.select div {
    display: inline-block;
}
.curVal {
    height: 30px;
    width: 150px;
    line-height: 30px;
    vertical-align: middle;
    background-color: rgb(0, 162, 232);
    color: white;
}
.arrow {
    color: white;
    background-color: rgb(0, 140, 200); /* this can be an image */
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    position: absolute;
    top: 0px;
}
.choices {
    position: absolute;
    left: 0px;
    top: 30px;
    background-color: rgb(255, 127, 39);
    color: white;
    padding: 3px 3px 3px 3px;
    width: 150px;
}
.choices div {
    display: block;
    cursor: pointer;        
}

いくつかのjQuery:

$(document).ready()(function(){
    $(".choices").hide();
});
$(".arrow").click(function(event) {
   $(".choices").slideToggle("fast");
   event.stopPropagation();
});
$(".choice").click(function() {
   $(".curVal").html($(this).html());
   $(".choices").slideToggle("fast");
   event.stopPropagation();
});
$("html").click(function() {
   $(".choices").slideUp("fast");
});

それらをすべてまとめると、次のようになります: jsFiddle。

何らかの形でお役に立てば幸いです！

于 2012-08-15T11:31:50.837 に答える