是否有CSS唯一的方式来设置<select>下拉列表的样式?
我需要尽可能人性化地设置<select>表单的样式,而不需要任何JavaScript。在CSS中,我可以使用哪些财产来执行此操作?
此代码需要与所有主要浏览器兼容:
Internet Explorer 6、7和8Firefox浏览器游猎
我知道我可以用JavaScript实现:示例。
我说的不是简单的造型。我想知道,我们只能用CSS做什么。
我在Stack Overflow上发现了类似的问题。
还有Doctype.com上的这个。
我有这个确切的问题,除了我不能使用图像,而且不受浏览器支持的限制。这应该是“符合规范”,幸运的话,最终开始在各地工作。
它使用分层旋转的背景层来“剪切”下拉箭头,因为伪元素不适用于select元素。
编辑:在这个更新版本中,我使用了CSS变量和一个小型主题系统。
:根目录{--半径:2px;--baseFg:灰色;--baseBg:白色;--重音Fg:#006fc2;--重音Bg:#bae1ff;}.主题粉色{--半径:2米;--baseFg:#c70062;--baseBg:#ffe3f1;--重音Fg:#c70062;--重音Bg:#ffaad4;}.主题结构{--半径:0;--baseFg:白色;--baseBg:黑色;--accentFg:黑色;--accentBg:橙色;}选择{字体:400 12px/1.3无衬线;-webkit外观:无;外观:无;颜色:var(--baseFg);border:1px实体变量(--baseFg);线高:1;大纲:0;衬垫:0.65em 2.5em 0.55em 0.75em;边界半径:var(--radius);背景色:var(--baseBg);背景图像:线性梯度(var(--baseFg)、var(--baseFg)),线性梯度(-135度,透明50%,var(--accentBg)50%),线性梯度(-225度,透明50%,var(--accentBg)50%),线性梯度(var(--accentBg)42%,var(--accentFg)42%);背景重复:无重复,无重复,不重复,无反复;背景大小:1px 100%,20px 22px,20px 22 px,20px 100%;背景位置:右20px中心,右下,右下和右下;}选择:悬停{背景图像:线性梯度(var(--accentFg),线性梯度(-135度,透明50%,var(--accentFg)50%),线性梯度(-225度,透明50%,var(--accentFg)50%),线性梯度(var(--accentFg)42%,var(--accentBg)42%);}选择:活动{背景图像:线性梯度(var(--accentFg),线性梯度(-135度,透明50%,var(--accentFg)50%),线性梯度(-225度,透明50%,var(--accentFg)50%),线性梯度(var(--accentFg)42%,var(--accentBg)42%);颜色:var(--accentBg);边框颜色:var(--accentFg);背景色:var(--accentFg);}<选择><option>这么多选项</option><选项></选项></选择><select class=“主题粉色”><option>这么多选项</option><选项></选项></选择><select class=“主题构建”><option>这么多选项</option><选项></选项></选择>