4

私はここの解決策に従ってカスタム選択/ドロップダウンメニューを使用しています：https ：//stackoverflow.com/a/10190884/1318135

ボックスをクリックした場合にのみオプションが表示されることを除いて、これはうまく機能します。右側の「矢印」をクリックしても、ドロップダウンオプションは表示されません。回避策は何ですか？

http://jsfiddle.net/XxkSC/553/

HTML：

<label class="custom-select">
 <select>
  <option>Sushi</option>
  <option>Blue cheese with crackers</option>
  <option>Steak</option>
  <option>Other</option>
 </select>

CSS：

label.custom-select {
position: relative;
display: inline-block;

 }

.custom-select select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #000;
    color:white;
    border:0;
  }




/* Select arrow styling */
.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    padding: 0 7px;
    background: #000;
    color: white;
   }

.no-pointer-events .custom-select:after {
    content: none;
    }
4

2 に答える 2

6

クライアントベースに応じて、非常に単純なコードが1つあります。

pointer-events:none;

ここでブラウザのサポートを参照してください：http：//caniuse.com/pointer-events

編集：ベッドの中で、おそらく別の解決策を考えていますが、私の電話ではテストできませんが、jQueryのmousedownトリガーは、クリックの少し前に矢印を一時的に非表示にするオプションである可能性がありますか？

または、これがどのように使用されるかはわかりませんが、別のスレッドで見ました：$（'＃select-id'）。show（）。focus（）。click（）;

私が自分のPCにいたら、それをテストします...

于 2012-08-02T23:46:13.887 に答える
1

それはすばらしい。情報をありがとう。コンテンツの使用のように。Androidはありませんが、FF、Saf、ChromeのMacで見たところ、かなりうまく機能しています。追加してみてください：

-moz-border-radius: 0px 20px 20px 0px;
-webkit-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;`=

それに.custom-select：afterを使用して、境界線を揃えます。

于 2012-12-05T03:50:11.017 に答える