8赞

选择背景图片(下拉列表)在Chrome中不起作用

作者：mobiledu2402852413 | 2023-08-09 16:47

如何解决《选择背景图片(下拉列表)在Chrome中不起作用》经验，为你挑选了3个好方法。

我想使用图像作为选择/下拉列表的背景.以下CSS在Firefox和IE中运行良好,但在Chrome中不起作用:

#main .drop-down-loc { width:506px; height: 30px; border: none; 
  background-color: Transparent; 
  background: url(images/text-field.gif) no-repeat 0 0; 
  padding:4px; line-height: 21px;}

Danny G.. 79

select 
{
    -webkit-appearance: none;
}

如果需要,还可以添加包含箭头的图像作为背景的一部分.

1> Danny G..：

select 
{
    -webkit-appearance: none;
}

如果需要,还可以添加包含箭头的图像作为背景的一部分.

顺便说一句 - 这也会删除你选择的向下箭头图形.

我总是喜欢解决方案而不是讲道!+1

因为会有背景,这显然可以成为背景图像的一部分.

2> Ben Hull..：

Arne所说的 - 你不能可靠地选择选择框的样式,让它们在浏览器中看起来一致.

统一:https://github.com/pixelmatrix/uniform是一个javascript解决方案,它为您提供了对表单元素的良好图形控制 - 它仍然是Javascript,但它与javascript解决此问题一样好.

3> Arne Roomann..：

通常，对标准表单控件设置样式是一种不好的做法，因为在每个浏览器上输出看起来都非常不同。有关一些渲染示例，请参见：http : //www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/。

话虽这么说，我很幸运地将背景色设为RGBA值：



  
    
  
  
    吐个槽吧,看都看了

会员登录 | 用户注册