Html CSS-将下拉箭头更改为unicode三角形

我已经定制了我的使用方式，如下所示：

background-color:#ececec;
border:0;
border:1px solid #e3e3e3;
border-radius:3px;
width:100%;
font-family:'FuturaStdLightOblique', sans-serif;
font-size:16px;
color:#616263;
outline:none;
height: 40px;

但我还想把我的下拉箭头改成适合这种设计的外观。我想使用unicode三角形▼ &9660; 作为向下箭头的替代，如果可能，将其设置为与我的选择标签中的文本相同的颜色

关于如何在不使用CSS/HTML之外的任何东西的情况下实现这一点，有什么想法吗？提前谢谢。

也许吧

*, *：之前， *：之后{ 框大小：边框框； } * { 填充：0； 保证金：0； } 形式{ 填充：1rem； 最大宽度：400px； 保证金：1em自动； } .选择{ 高度：40px； 宽度：100%； 溢出：隐藏； 位置：相对位置； 边界半径：3px； 边缘底部：1米； } 。选择：在{ 内容：▼; 填充：12px 8px； 位置：绝对位置； 右：10px； 排名：0； z指数：1； 文本对齐：居中； 宽度：10%； 身高：100%； 指针事件：无； } .选择\u\u字段{ 高度：40px； 宽度：100%； 填充：5px15px； 颜色：616263； 背景色：ececec； 边框：1px实心E3； 大纲：无； 字体大小：16px； -webkit外观：无； /*适用于webkit浏览器*/ -moz外观：无； /*对于firefox*/ 外观：无； /*适用于现代浏览器*/ } /*删除ie的默认插入符号*/ .选择\字段：：-ms展开{ 显示：无； } .选择\字段：焦点：无效{ 边框颜色：FD6347； } .选择\字段：必填：有效{ 边框颜色：006400； } .btn提交{ 颜色：fff； 显示：块； 填充：15px； 文本转换：大写； 背景：535C69； 宽度：100%； 边界：无； 边界半径：3px； } 选择选项。。。 选择1 选择2 选择3 选择4 备选案文5 备选案文6 提交

---

对于那些喜欢理解和补充以下简化代码的人，可以通过以下方式完成：

添加包含select元素a包装器的元素 设置包装器的相对位置 删除“选择”上的外观以删除默认三角形 使用以下内容在包装器上定义：：after规则： 具有unicode的内容属性▼ 无指针事件，因此select保持可单击状态并触发下拉事件 为了放在正确的位置的绝对位置 因此，光秃秃的骨头实际上就是骨骼，只需要：

.包装纸{ 溢出：隐藏； 位置：相对位置； 宽度：10rem；/*下拉列表的实际长度*/ } .包装工：之后{ 内容：▼; 字体大小：0.8rem； 指针事件：无；/*▼ 单击触发器下拉列表*/ 位置：绝对位置； 右：0.2rem； 顶部：0.3rem； z指数：1； } 挑选{ /*删除默认插入符号*/ -webkit外观：无；/*webkit浏览器*/ -moz外观：无；/*firefox*/ 外观：无；/*现代浏览器*/ 宽度：100%； } 选择：：-ms展开{ 显示：无；/*删除ie的默认插入符号*/ } 选择选项 选择1 选择2 选择3 制作自己的自定义下拉列表非常简单，给定的代码将向您解释实现它的基本且最简单的方法

.选择框{ 背景色：000000； 颜色：白色； 填充：26px； 边框底部：1px实心5e5e！重要； 字号：17px； 盒影：0 5px25px rgba0,0,0,0.2； -webkit外观：按钮； 大纲：无； 宽度：48%； 边界：无； 字号：600； 左侧填充：0px； } .box：：之前{ 内容：\f13a； 位置：绝对位置； 右：0； 宽度：60px； 身高：18%； 文本对齐：居中； 字体大小：25px； 线高：31px； 颜色：rgba255、255、255、0.5； 背景色：rgba255、255、255、0.1； } 选择Micbookpro 选择Micbookpro 选择Micbookpro 选择Micbookpro 选择Micbookpro

---

请创建一个提琴，这样我就可以帮助你摆脱包装是什么使这成为可能，例如选择：后将不起作用