Forms 如何在纯css中的select标记中提供背景图像？

我想这样做

这是表单的选择下拉列表

我的代码是

HMTL

<select>
                        <option>Country</option>
                        <option>India</option>
                        <option>USA</option>
                    </select>

---

我只想要纯css。如何操作？

我不确定是否有简单的跨浏览器方法，但如果您使用CSS+jQuery组合，您可以在所有使用的浏览器中使用它：

请参阅有关如何执行此操作的教程，并根据您想要的外观修改CSS

屏幕截图：

---

现在还没有办法用纯css创建这样的下拉框

---

您可以创建自己的js/css下拉插件，或者使用已有的众多jQuery/css插件中的一个。

此解决方案适用于纯css，但与Chrome相关。请参见以下示例：

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

---

没有尝试过用

-moz

前缀替换

-webkit

前缀，因为它可以与Firefox浏览器兼容，它实际上也可以工作，您应该尝试一下。

下拉菜单在不同的浏览器中实现不同，样式也不受广泛支持。这是有原因的。首先，考虑iPad／iPhone上的DoPrPosits。它们的工作方式与桌面应用程序下拉菜单完全不同

---

如果你想要一个样式化的下拉列表，你必须用列表和javascript自己构建它。或者使用众多可用的库中的一个（这进一步证明没有可用的纯CSS解决方案）。

@RohitAzad:我希望你能找到一个跨浏览器的纯CSS解决方案Hey@akalucas我想使用css3，我想在我的项目中使用纯CSS。我知道javascript中有很多选项………你不能用纯CSS来做，所以你必须使用javascript解决方案。有一个使用jQuery。@RohitAzad您可以使用css3使一个或其他元素看起来像一个下拉框。但是，您最终总是使用最少的javascript来处理单击事件。

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}