如何用css样式改变下拉菜单的样式？

个性化下拉框样式

最新推荐文章于 2024-03-01 15:57:32 发布

原创最新推荐文章于 2024-03-01 15:57:32 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

前端css样式专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何通过修改CSS样式来个性化HTML中select元素的外观，包括去除默认样式、添加自定义背景图片等。

部署运行你感兴趣的模型镜像

敲下如下代码：

<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>

你将会看到如下图的默认下拉选择框样式，

虽然也无伤大雅，但如果你想让它更个性点呢，像这样？

只需要改变下select的css样式就可以做到了~

原理：将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。

select {

    /*复写下边框，将边框颜色改为跟所在div的background一样的颜色，就看不到边框啦*/
    border:1px solid  #f5f5f5;

    /*很关键：将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    /*在选择框的下方中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll center bottom transparent;

    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-bottom: 10px;
}

个性化下拉选择框完成！

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率