重新设计选择我想要的设计

Question

我有一个选择框如下：

但是，我想将设计更改为：

任何人都知道在css中执行此操作的技巧吗？或者甚至可能吗？ 提前谢谢。

Answer 1

HTML：

<select  id="my_selection">
</select>

CSS：

#my_selection {
    -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   background-image: url(../img/drop-down.png);  /* add custom arrow */
   background-repeat: no-repeat;
   background-position:right center;
}

使用以下代码完成您想要的任务。