html - 如何在 css 上自定义 <select>？

标签 html css

<分区>

所以我正在尝试自定义一个完整的保管箱(国家/地区选择器)而不是常规外观，我想为其添加不同的设计。

常规设计

[ Regular Design with a few adjusts on color[1]

我想要的设计

第一张图片是带有颜色调整的默认版本，它是网站上正在运行的版本，我想让设计看起来像我上传的第二张图片。

第二个版本是我在 photoshop 上得到的，我如何自定义我的 <select>到第二张图？这是我在 css 上获得的代码，我尝试使用::webkit 但它没有用。

CSS

.paistofill option {
    background-color:#a5e4c9;
    font-weight: normal;
    white-space: pre;
    min-height: 0.0em;
    padding: 0px 0px 0px;
    border-radius: 50px;
}

.paistofill select{
    background-color: white;
    color:#a5e4c9;
    border-radius: 50px;
}

select自定义对元素没有影响，我需要做什么？

最佳答案

为此你需要使用插件(或自己制作)，如https://select2.github.io/ .您无法在每个浏览器中真正可靠地自定义选择的下拉菜单。这些插件通常替换并制作选择(和下拉列表)的 div 元素，其行为类似于普通选择。然后你可以很容易地用css修改这些元素。

关于html - 如何在 css 上自定义 <select>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38265086/

上一篇：css - Ruby on Rails 4、样式表和图片

下一篇：html - Bootstrap CSS 样式问题

相关文章：

javascript - jQuery - 复选框未被选中

html - 如何创建一个未嵌套的 IE11 媒体查询？

css - 固定定位元素在 IE 中滚动时上下弹跳

javascript - 计时器位置在 JQuery 中显示双倍

javascript - 带有按钮的 Html 两种语言选项(无需重定向到不同的页面)

php - XML 输出并排显示

HTML 表格 - td 位于另一个 td 下

html - 边界半径不适用于图像

javascript - Cordova:如何在 npm 安装后包含来自 node_modules 的 .js .css 文件

javascript - 我可以使用 javascript 在每隔一行插入一些字符串吗？