帶有自定義箭頭的HTML選擇元素 - 文本來自於箭頭

Question

所以，我有一個帶有自定義箭頭的select元素的HTML頁面。問題在於select元素文本來自select元素的箭頭。我不要那個。文本不應該超過箭頭。

請注意：我正在尋找一款跨瀏覽器的解決方案。

這是我的CSS代碼。默認選擇箭頭將被替換爲自己的圖像。

div.pudotusvalikko { 
    width: 95%; 
    box-sizing: content-box; 
    height: 22px; 
    padding: 0; 
    overflow: hidden; 
    background-color: #FFFFFF; 
    background-image: url(/kuvat/arrow22x22.gif); /* width 22 px and height 22 px */ 
    background-repeat: no-repeat; 
    background-position: right center; 
    border: 1px solid #999999; 
} 

div.seura { 
    width: 224px; 
} 

div.pudotusvalikko select { 
    border: none; 
    font-size: 12px; 
    padding: 2px; 
    width: 110%; 
    box-sizing: content-box; 
    height: 18px; 
    line-height: 18px; 
    text-align: left; 
    background: transparent; 
    background: rgba(0,0,0,0); 
    -webkit-appearance: none; 
} 

這裏是我的HTML代碼。當選擇「列表的默認值是這個」項時，其文本將出現在自定義選擇箭頭上。

<div class="pudotusvalikko seura"> 
    <select name="se1" id="se1"> 
    <option value="1">All</option> 
    <option value="2">GUU</option> 
    <option value="3">PPP</option> 
    <option value="4">SBK</option> 
    <option value="5" selected="selected">Default value of the list is this</option> 
    </select> 
</div> 

我應該如何修改我的代碼，如果我想將這個項目文本「列表中的默認值是這個」不會過來的自定義選擇箭頭？

編輯：

正如你可以在這裏看到，短信來了在背景圖像。我應該怎麼做才能解決這個問題？

div.pudotusvalikko { 
 
    width: 95%; 
 
    box-sizing: content-box; 
 
    height: 22px; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color:#fff; 
 
    background-image: url('https://source.unsplash.com/random'); /* width 22 px and height 22 px */ 
 
    background-repeat: no-repeat; 
 
    background-position: right center; 
 
    background-size:20px 20px;/*Add this*/ 
 
    border: 1px solid #999999; 
 
} 
 

 
div.seura { 
 
    width: 224px; 
 
} 
 

 
div.pudotusvalikko select { 
 
    border: none; 
 
    font-size: 12px; 
 
    padding: 2px; 
 
    width: 110%; 
 
    box-sizing: content-box; 
 
    height: 18px; 
 
    line-height: 18px; 
 
    text-align: left; 
 
    background: transparent; 
 
    background: rgba(0,0,0,0); 
 
    -webkit-appearance: none; 
 
}

<div class="pudotusvalikko seura"> 
 
    <select name="se1" id="se1"> 
 
    <option value="1">All</option> 
 
    <option value="2">GUU</option> 
 
    <option value="3">PPP</option> 
 
    <option value="4">SBK</option> 
 
    <option value="5" selected="selected">Default value of the list is this this this this this this this this this this this</option> 
 
    </select> 
 
</div>

Answer 1

的<select>菜單來自操作系統和瀏覽器的用戶界面，而不是你的代碼。例如，在iOS上，界面與Windows或OS X上的界面完全不同。

如果您需要此行爲，則需要創建CSS或Javascript下拉菜單。

Answer 2

你有沒有設置背景大小的圖像，如下面的代碼，

div{ 
 
    width: 330px; 
 
    height: 22px; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color:#fff; 
 
    border: 1px solid #999999; 
 
} 
 
div::before{ 
 
    content:''; 
 
    background:#f22; 
 
    position:absolute; 
 
    width:20px; 
 
    height:20px; 
 
    top:10px; 
 
    left:320px; 
 
    z-index:9; 
 
    pointer-events:none; 
 
    background:url("https://source.unsplash.com/random"); 
 
    background-repeat:no-repeat; 
 
    background-size:20px 20px; 
 
} 
 
select { 
 
    border: none; 
 
    font-size: 12px; 
 
    padding: 2px; 
 
    box-sizing: content-box; 
 
    height: 18px; 
 
    line-height: 18px; 
 
    text-align: left; 
 
    width:100%; 
 
}

<div> 
 
    <select name="se1"> 
 
    <option value="1">All</option> 
 
    <option value="2">GUU</option> 
 
    <option value="3">PPP</option> 
 
    <option value="4">SBK</option> 
 
    <option value="5" selected="selected">Default value of the list xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</option> 
 
    </select> 
 
</div>

Answer 3

添加而不是限制選擇權寬度填充。