select框默认样式去除（自定义箭头小图标）

CSS代码

  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  select::-ms-expand { display: none; }          
  .info-select{
            width: 12%;
            margin-left: 64%;
            border: none;
            outline: none;
            /*将默认的select选择框样式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            -ms-appearance:none;
           /*在选择框的最右侧中间显示小箭头图片*/
           background: url(../img/arrow.png) no-repeat right center transparent /size;     
 }

HTML代码

 <select class="info-select">
       <option selected="selected">北京</option>
        <option>上海</option>
  </select>

background连写方法详情

slect样式美化

css样式：
	.selCode {
		    appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			outline: none;
			border: 1px solid #46c4f6;
			color: #fff;
			padding: 0 10px;
			background-color: #09134e;
			width: 35%;
			line-height: 0.3rem;
			option {
				background: #000;
				border: none;
				outline: none;
			}
	}


html部分：

	<select class="selCode">
			<option>45664156</option>
			<option>56462522</option>
			<option>1454254654</option>
	</select>

美化后样式：

注意select的background-color不能为transparent，否则select的值会重叠