大きな矢印のオプションのドロップダウンボタン

Question

質問があり、助けが必要です...

私は宿題として何かが必要です。私は単純なHTML/CSS/Bootstrapホテルの部屋の予約ページを作成する必要があります。私はそれを作る方法を本当に知らないという形があります。 フォームの1つが選択オプションドロップダウンボタンです。彼らは私から普通の矢印よりも大きくすることを望んでおり、私はこの矢印をもっと大きくする方法を知らない。

ここに私のコードを投稿する：

HTML

<label class="control-label">Nationality</label><br> 

<select class="options izbor" name="country"> 
    <option value="България">Bulgaria</option> 
    <option value="Румъния">Germany</option> 
    <option value="Гърция">Russia</option> 
    <option value="Сърбия">England</option> 
</select> 

CSS

.izbor { 
    display: block; 
    width: 100%; 
    height: 34px; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #555; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #b7b7b7; 
    border-radius: 0px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
} 

Answer 1

私は、デフォルトの矢印を隠し、代わりに別の画像を置くあなたのためにこのコードを、作成しました。私が選んだイメージは、テキストが含まれているので少し愚かですが、あなたはあなたが持っているものを使うために置き換えることができます。

.izbor { 
 
    display: block; 
 
    width: 90%; 
 
    height: 34px; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #555; 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #b7b7b7; 
 
    border-radius: 0px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
} 
 

 
select.izbor{ 
 
    border: 1px solid red; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    background: url(https://upload.wikimedia.org/wikipedia/en/5/57/DownArrow.png); 
 
    overflow: hidden; 
 
    background-repeat: no-repeat; 
 
    background-size: 80px 30px; 
 
    background-position: right; 
 
}

<label class="control-label">Nationality</label> 
 
<br> 
 
<select class="options izbor" name="country"> 
 
    <option value="България">Bulgaria</option> 
 
    <option value="Румъния">Germany</option> 
 
    <option value="Гърция">Russia</option> 
 
    <option value="Сърбия">England</option> 
 
</select>

Answer 2

あなたはselect要素のためのカスタムスタイルを作成したい場合は、これをチェック

select { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 96% !important; 
 
    
 
} 
 

 
select::-ms-expand { display: none; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <select class="form-control"> 
 
     <option>Option 1</option> 
 
     <option>Option 2</option> 
 
     <option>Option 3</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>