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

最新推荐文章于 2024-06-13 09:00:00 发布

阿狸远翔

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量2.9k

点赞数 3

分类专栏： css

本文链接：https://blog.csdn.net/h2453532874/article/details/60883869

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目标样式：

代码：

<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; 
}