带有自定义箭头的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

添加而不是限制选择权宽度填充。