Html 添加向下箭头以选择下拉列表

您好，我正在创建一个MVC Razor站点，目前我有一个样式化的下拉框。我不知道如何添加向下箭头。有什么想法吗？我试过了，但不管用。这是我目前的代码

HTML

<div class="dropdown">
    <select>
        <option>Option One </option>
        <option>Option Two </option>
        <option>Option Three </option>
    </select>
</div>

---

您可以通过css和伪元素创建这个三角形

.dropdown {
    position: relative;
}

.dropdown:before {
    content: "";
    position: absolute;
    right: 10px;
    top: 8px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
}

.dropdown:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 3px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
}

---

这是一个演示：

谢谢，这就是我要找的@来自“您需要单击箭头外侧以使其下降”的混乱评论（在一次传递中不正确）@混乱示例错过了

位置：relative属性。这是一个简单的堆栈顺序问题以便当您单击箭头时，下拉列表显示dropdown。
.dropdown {
    position: relative;
}

.dropdown:before {
    content: "";
    position: absolute;
    right: 10px;
    top: 8px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
}

.dropdown:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 3px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
}