gpt4 book ai didi

css - 浏览器(Webkit、IE、Firefox)更改选择的背景

转载 作者:技术小花猫 更新时间:2023-10-29 11:11:11 26 4
gpt4 key购买 nike

我一直在尝试摆脱网站中的默认渐变背景。我知道如果我设置 -webkit-appereance:none 这将是可能的,但我将失去我想要的下拉列表中的箭头和其他行为。是否可以使用 -webkit-appearance: menulist 将背景设置为白色?

这是我的,但背景没有改变

.ius select{
-webkit-appearance: menulist;
-moz-appearance: menulist;
appearance: menulist;
height:32px;
border:1px solid #c8c8c8;
width:250px;
background:rgba(255, 255, 255, 0);
background: transparent;
}

最佳答案

外观属性通常用于两件事:

  1. 模仿其他元素的原生样式
  2. 或删除所有原生样式(将外观设置为无)

这是一个很奇怪的属性。

由于要去除原生默认背景,所以需要将appearance设置为none。这将删除所有 样式(渐变和默认箭头图标)。但这不是什么大问题,因为您可以使用 css 为其应用更多样式。

使用标记:

<select id="menulist">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>

和 CSS:

#menulist {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height:20px;
border:1px solid rgb(156,156,156);
width:250px;
text-indent: 8px;
/**
* replace this background url with a proper arrow asset
**/
background: url('http://placehold.it/5x10') no-repeat 95% 50%;
}

完整的 jsfiddle 在这里可用:http://jsfiddle.net/gwwar/vR53Q/2/

由于此属性仅在 Chrome、Safari 和 Firefox 上受支持,我可能会采用不同的方法,使用 native 选择样式或使用您可以完全控制的下拉组件。

关于css - 浏览器(Webkit、IE、Firefox)更改选择的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18038147/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com