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

╰+攻爆jí腚メ 2023-02-28 05:58 55阅读 0赞

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连写方法][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>

美化后样式：

![20200725191531182.png][]

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

[background]: https://blog.csdn.net/u011200562/article/details/107470317
[20200725191531182.png]: /images/20230209/5e92aaa9bec04d79a33c0343941a5305.png