CSS去掉select 边框和小三角 让select不显示框架

对于一些特殊应用场景，我们并不想select下拉框显示它的框体和右侧的下拉三角形，这个时候就需要改动CSS

html代码

<select id="selected">
<option>选择查询条件</option>
<option>同事</option>
<option>亲戚</option>
</select>

CSS部分，这里入手

#selected{
width: 100%;
height: 100%;
background-color: #fff;
color: white;
/* 去掉三角 */
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */
/* 去掉边框 */
      border: 0;
    display: block;
    position: relative;
}