使用纯css更改下拉菜单的默认样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/h2453532874/article/details/60883869

目标样式：

代码：

<form>
                <select>
                    <option>中国</option>
                </select>
                <select>
                    <option>濮阳市</option>
                </select>
                <select>
                    <option>南乐县</option>
                </select>
                <select>
                    <option>韩张镇</option>
                    <option>韩张</option>
                </select>
                <a href="#"><span class="so">搜索</span></a>
            </form>

select{
    border: 0; 					/*取消边框*/
    width: 200px;
    height: 40px;
    background-color: white;			/*背景可以改为一张图片*/
    color: rgba(132, 133, 144, 0.8);
    font-size: 20px;


    -webkit-appearance: none;			/*取消小三角的显示*/
    text-indent: 0.01px;             		/*仅仅为了美观*/
    background-image: url(../45.jpg); 		/*你要替换后的小三角链接*/
    background-repeat: no-repeat;		/*不解释，但是别忘了*/
    background-position: 170px 10px;		/*把小三角放到该放的地方*/
    margin: 0 20px;
}	
span.so{					/*******以下为按键，与下拉框无关*******/
    display: inline-block;		
    width: 200px;
    font-size: 20;
    text-align: center;
    line-height: 40px;
    color: white;
    background-color:#e45353; 
}