選択フォームの矢印を編集するには？（ブートストラップ4）

私はブートストラップ4でフォームを作成しています。下の図に示すように、矢印選択エレメントのスタイルを最初のバージョンから2番目のバージョンに編集/変更したいと考えています。選択フォームの矢印を編集するには？（ブートストラップ4）

（を必要引用は、このコミュニティに見られるように）私は矢を編集するさまざまな方法を試してみましたが、私は何も成功していません。

希望の結果を得る方法を説明することで誰かが私を助けることができますか？

問題については、HTMLの例をご覧ください。

<head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <meta content="Description" name="description"> <meta content="index,follow" name="robots"> <link href="/images/myicon.png" rel="icon" type="image/png"> <title>TITLE HERE</title>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="form-group"> <label for="exampleSelect1">Example select</label> <select class="form-control" id="exampleSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </body>

出典

2017-02-21 Anonymous

あなたは 'SELECT'ドロップダウン例えばいくつかのカスタムを使用する必要がありますselectyze、select2など。CSSを使用して見た目をカスタマイズすることができます。 –

あなたはデフォルトの動作を変更することはできません..あなたの必要条件に他のサードパーティのツールを使用してください –

これを試すと 'margin-top：10px; ボーダートップ：15px赤色の固体。 border-right：15px透明なソリッド。 border-left：15px透明なソリッド。 border-bottom：15px透明な固体; ' –

が、私は同じブートストラップに答えを発見した4

<select class="custom-select"> 
 
    <option selected>Open this select menu</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select>

リンク：あなたはSelectセレクトを使用することができればhttps://v4-alpha.getbootstrap.com/components/forms/#select-menu

はとにかく

出典

2017-02-21 09:37:31

単なる例です。参照として使用することができます。

この例では、選択ボックスをカスタマイズする方法を学習します。しかし、私の経験では。古いブラウザはこの方法をサポートしていません。

select { 
 
    background-image: 
 
    linear-gradient(45deg, transparent 50%, red 60%), 
 
    linear-gradient(135deg, red 40%, transparent 50%) !important; 
 
    background-position: 
 
    calc(100% - 30px) 14px, 
 
    calc(100% - 20px) 14px, 
 
    100% 0; 
 
    background-size: 
 
    10px 10px, 
 
    10px 10px; 
 
    background-repeat: no-repeat; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="form-group"> 
 
    <label for="exampleSelect1">Example select</label> 
 
    <select class="form-control" id="exampleSelect1"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    </select> 
 
</div>

それが役に立てば幸い！

出典

2017-02-21 09:33:24

協力いただきありがとうございます、ソリューションは、次のようなcostumクラスを追加することで簡単になります：

$("#myList").select2({ 
    containerCssClass: "customClass" 
});

希望します。

$("#myList").select2({ 
 
    containerCssClass: "customClass" 
 
});

/* select2 version 4.0.0 Beta 2 */ 
 
.select2-container--default .customClass.select2-selection--single{ 
 
    border-radius: 24px; 
 
    height: 40px; 
 
    padding-top: 5px; 
 
} 
 

 
.select2-container--default .customClass.select2-selection--single .select2-selection__arrow b{ 
 
    border-color: #00b37c transparent transparent transparent; 
 
    border-width: 8px 8px 0 8px; 
 
    margin-left: -22px; 
 
} 
 

 
.select2-container--default.select2-container--open .customClass.select2-selection--single .select2-selection__arrow b{ 
 
    border-color: transparent transparent #00b37c; 
 
    border-width: 0px 8px 8px; 
 
    margin-left: -22px; 
 
} 
 

 
.select2-container--default .customClass.select2-selection--single .select2-selection__arrow{ 
 
    padding-top: 5px; 
 
    height: 35px; 
 
} 
 

 
.select2-container--default .customClass.select2-selection--single .select2-selection__rendered{ 
 
    color: #00b37c; 
 
    font-family: monospace; 
 
    font-size: 16px; 
 
    margin-left: 8px; 
 
    height: 40px; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script> 
 

 

 
<select id="myList" style="width:300px"> 
 
    <option value="A">Protection Form</option> 
 
    <option value="B">Option 2</option> 
 
    <option value="C">Option 3</option> 
 
    <option value="D">Option 4</option> 
 
</select>

出典

2017-02-21 09:55:01

ニース！彼はブートストラップを使用しているのですばらしい答えです。私は彼もjQueryを含んでいると思います。（+1） –

選択フォームの矢印を編集するには？ （ブートストラップ4）

答えて

関連する問題

選択フォームの矢印を編集するには？（ブートストラップ4）