更大箭頭的選項下拉按鈕

有一些我必須作爲家庭作業。我必須做一個簡單的HTML/CSS/Bootstrap酒店客房預訂頁面。有一種形式，我不知道如何去做。其中一種形式是選擇選項下拉按鈕。他們想讓我製作比正常箭頭更大的箭頭，但我不知道如何讓這個箭頭變大。

發佈我的代碼在這裏：

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; 
}

來源

2017-08-04 valio957

如果你想爲選擇元素您的自定義樣式，然後檢查了這一點。 https://stackoverflow.com/questions/45436182/drop-down-menu-with-triangel-arrow/45437076#45437076 – JavaEvgen

我創造了這個代碼對你來說，這隱藏了默認的箭頭，而是另一張圖像。我選擇的圖像有點愚蠢，因爲它包含一些文字，但您可以更換以使用更好的東西。

.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>

來源

2017-08-04 07:33:19 Happysmithers

這不適用於Firefox，舊的箭頭和你的新箭頭（拉伸）都顯示。 –

謝謝 - 最初只有webkit的CSS。增加了moz和通用CSS。 – Happysmithers

謝謝你的幫助:) – valio957

試試這個，快速和容易的方法，

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>

來源

2017-08-04 07:33:58 codesayan

我會使用SVG作爲背景並應用'select :: - ms-expand {display：none; '在IE中工作。 –

是的，這是正確的先生，我只是忘記IE瀏覽器。 – codesayan

更大箭頭的選項下拉按鈕

回答

相關問題