web-dev-qa-db-ja.com

丸い境界線で選択ドロップダウンを作成する方法？

私はドロップダウンメニューに選択タグを使用しています。CSSを使用して、選択ボックスを丸みを帯びた角にするために、このドロップダウンメニューを正方形のままにして、丸みを帯びた角も回転させます。

こちらがライブデモです

http://jsfiddle.net/ankurdhanuka/AwUHn/1/

[〜＃〜] html [〜＃〜]

<p class="formRight">
<span style="padding-right:100px">Lead Type: </span>

    <select id="leadType" class="box2" name="lead_type">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</p>

[〜＃〜] css [〜＃〜]

.formRight select {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 10px #E8E8E8 inset;
    height: 40px;
    margin: 0 0 0 25px;
    padding: 10px;
    width: 110px;
}

あなたの助けをいただければ幸いです。前もって感謝します。

htmlcssselect
11
Ankur Dhanuka

解決策を確認してください：

ライブデモ： https://jsfiddle.net/webx/2g5bydyo/

.selectWrapper{
  border-radius:36px;
  display:inline-block;
  overflow:hidden;
  background:#cccccc;
  border:1px solid #cccccc;
}
.selectBox{
  width:140px;
  height:40px;
  border:0px;
  outline:none;
}
<div class="selectWrapper">
  <select class="selectBox">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>
</div>
14
webx

これが私の解決策です。

[〜＃〜] css [〜＃〜]

.selectBox{border-radius:4px;border:1px solid #AAAAAA;}

[〜＃〜] html [〜＃〜]

<select class="selectBox">
.............
</select>
9
John

Ankurのドロップダウンリストはユーザーのオペレーティングシステムによって制御されるため、これらの要素を完全にスタイル設定することはできません。希望する外観を実現するには、開発、または サードパーティのカスタムドロップダウンリスト の使用を検討してください。

あなたのフィドルを見てから; デモ5 Hugo Giraidelが探しているものを提供する場合があります。

Dropdown List

基本的にHTMLを使用します<li>要素とJS/jQueryを使用して、いくつかの基本的な遷移効果を持つドロップダウンリスト効果を作成します。

5
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

今は理由はわかりませんが、デフォルトの矢印を選択して削除すると機能します

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

select::-ms-expand {
  /* For IE10 */
  display: none;
}

select {
  border-radius: 20px;
  width: 100px;
  height: 40px;
  padding-right: 10px;
  padding-left: 10px;
}
0
Maksym Shemet

このStackoverflowの投稿を見ましたか？
CSS-SELECTタグを使用する場合のドロップダウンボックスの境界半径？SELECT入力そのものではなく、実際のドロップダウンボックス？
あなたが求めていることが不可能であるため（または少なくともクロスブラウザ互換性がないため）

これを機能させ、ブラウザ間互換性を持たせるには、DIV要素（または非フォーム要素）でドロップダウン/選択を作成し、JS/jQueryでそれらの値を非表示の選択に更新する必要があります。これにより、DIVを制限なしに好きなようにスタイル設定できます。

これはあなたを助けるかもしれません：
選択ドロップダウンの代わりにJQuery自動補完

0
Sander