自定義選擇與長的選擇內容

Question

你好，我有一點問題關於我的自定義選擇佈局。我創建了一個自定義選擇，適用於所有瀏覽器，甚至IE。但是我的自定義選擇有問題。首先看一下我的HTML代碼：

.select-style { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 1px solid #ccc; 
 
    width: 120px; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
    background-color: #fff; 
 
    background: #fff; 
 
    position: relative; 
 
} 
 
.select-style:after { 
 
    top: 50%; 
 
    left: 85%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    border-color: rgba(0, 0, 0, 0); 
 
    border-top-color: #000000; 
 
    border-width: 5px; 
 
    margin-top: -2px; 
 
    z-index: 100; 
 
} 
 
.select-style select { 
 
    padding: 5px 8px; 
 
    width: 130%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 
.select-style select:focus { 
 
    outline: none; 
 
}

<div class="select-style"> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    <option value="Volkswagon Polo">Volkswagon Polo</option> 
 
    </select> 
 
</div>

的佈局設計問題

如果選擇了「大衆汽車波羅」選項，您看到文本後面的黑色箭頭。這看起來不是很好。我嘗試了幾個選項，但我無法管理它，使它看起來不錯。我試圖使用text-overflow選項，但沒有成功。有誰知道不通過箭頭圖標顯示文本的好方法，而不改變選擇的寬度？

Answer 1

我做了一些改進。你的箭想你的填充尊重和選擇能夠獲得比包裝紙更大，固定與overflow: hidden; width: 100%;：

.select-style { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 1px solid #ccc; 
 
    width: 130px; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
    background-color: #fff; 
 
    background: #fff; 
 
    position: relative; 
 
} 
 

 
.select-style:after { 
 
    top: 50%; 
 
    right: 10px; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    border-color: rgba(0, 0, 0, 0); 
 
    border-top-color: #000000; 
 
    border-width: 5px; 
 
    margin-top: -2px; 
 
    z-index: 100; 
 
} 
 

 
.select-style select { 
 
    padding: 5px 28px 5px 8px; 
 
    border: none; 
 
    box-shadow: none; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.select-style select:focus { 
 
    outline: none; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<div class="select-style"> 
 
    <select> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     <option value="Volkswagon Polo">Volkswagon Polo</option> 
 
    </select> 
 
</div>

JSFiddle

浮動您.select-style和拆卸寬度，你可以自動調整其內容。

Answer 2

試試這個：

.select-style { 
    padding: 0 20px 0 0; 
    margin: 0; 
    border: 1px solid #ccc; 
    width: auto; 
    border-radius: 3px; 
    overflow: hidden; 
    background-color: #fff; 
    background: #fff; 
    position: relative; 
    display: inline-block;} 

這是因爲你設置。選擇風格寬度固定值。 display：inline-block;防止元素擴展爲全寬，填充在箭頭附近設置一些空間。現在它看起來不錯:)。

我也注意到了，當我從.select-style中選擇寬度並添加文本對齊：center時，它看起來甚至是無用的:)。

Answer 3

，如果你不想改變你的寬度可以使用

.select-style select { 
    /*for firefox*/ 
    -moz-appearance: none; 
    /*for chrome*/ 
    -webkit-appearance:none; 
    } 

    /*for IE10*/ 
.select-style select::-ms-expand { 
    display: none; 
} 

這將刪除下拉箭頭