我在另一个问题里面涉及到了这个，你可以参考一下。网页链接
伪类你也可以理解为一个容器，不过为了展示顺利需要添加 content: ''和display：block；为了能够准确定位，需要结合其容器设置定位，这都是基础不需要多介绍。
使用伪类做左右的箭头主要是需要了解 边框的构成
{border: 20px solid #333
border-top-color: #369
border-bottom-color: red
border-left-color: green
border-radius: 0
}
如图，我用四个颜色分别给四条边上色，可以看出来每一个边在宽度大于1的时候表现出的样子就倾向于一个梯形。
而我们可以理解为三角形其实就是梯形的一条底边长度为零。
那么为了得到一个三角形那么我们只需要容器的宽高都为零就可以了,如图：
{border: 20px solid #333
border-top-color: #369
border-bottom-color: red
border-left-color: green
border-radius: 0
font-size: 0
width: 0
height: 0
padding: 0
}
下一步我们只留下一个三角形。
只要让不需要展示的边颜色为透明就可以了
{border: 20px solid transparent
/* border-top-color: #369 */
/* border-bottom-color: red */
border-left-color: green
border-radius: 0
font-size: 0
width: 0
height: 0
padding: 0
}
这样你拿到的是上下左右四个方向的三角形，同样的 你如果需要的是斜向右上角的或者其他角度的，只要自己凑出这个方向就可以，类似于七巧板。
如果希望三角形呈现的不是直角三角形可以修改各个边的宽度。。
{border: 20px solid transparent
border-top-color: #369
/* border-bottom-color: red */
border-left-color: green
border-radius: 0
font-size: 0
width: 0
height: 0
padding: 0
}
<div class="styled-select"><select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
//下拉箭头保持不变。没有直接美化它的方式，但解决方案还是非常简单的，首先我们需要用一个div容器包裹在select元素外围
.styled-select {
width: 240px
height: 34px
overflow: hidden
background: url(new_arrow.png) no-repeat right #ddd
}
/*下一步我们需要加入一些css，以确保选择框元素被以某种方式美化：
我们需要确保选择框的跨度比外围的div容器更宽，这样默认的下拉箭头就会消失（选择框比外面的div宽大，默认的下拉箭头就会被隐藏）
我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置
就是用图片把原下拉箭头覆盖
*/
.styled-select select {
background: transparent
width: 268px
padding: 5px
font-size: 16px
border: 1px solid #ccc
height: 34px
-webkit-appearance: none /*for chrome*/
}
