html - 如何设置选择元素的箭头样式

标签 html css select

<分区>

如何更改 <select> 中的箭头样式.更改背景、字体颜色或所有边框内容很简单,但如何更改其中的“箭头”?当我改变字体颜色内容颜色改变但箭头保持黑色。

.language-choice{
    margin-top: 10px;		
    color: #719dd1;
    border-color: #719dd1; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-width: 2px;
}
<select class="language-choice">
    <option value="en">English</option>
    <option value="pl">Polish</option>
</select>

最佳答案

你可以试试这个:

  .language-choice{
     width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
     border-color: #719dd1; 
   -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-width: 2px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
    background-position-x: 244px;
}

DEMO FIDDLE

关于html - 如何设置选择元素的箭头样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32883817/

上一篇:javascript - 如何将日程元素添加到此日历中?

下一篇:javascript - 使用单选按钮在 div 之间切换

相关文章:

html - 背景视频的作用类似于元素的 CSS 背景大小覆盖,而不是整个页面

javascript - 我得到以下 JS 代码 : Cannot read property 'clientWidth' of null

mysql - 根据另一个表的 'similar' 值从一个表中检索记录

mysql - 用于显示额外列的 SELECT 语句

mysql - 加入前可以选择吗?

css - 减少列表项宽度以占据 Internet Explorer 11 中文本内容的确切大小

html - CSS3 buggy 悬停/过渡效果

javascript - 在 2 个不同的表中对齐行高的快速方法

javascript - 函数只运行一次

php - $row 没有正确地回显来自 mySql 数据库的一行