javascript - 移动浏览器的样式下拉列表

Question

我想为移动浏览器设置样式下拉列表。

它看起来像这样：

我想让它像这样：

我应用了一些 CSS，例如：

background-image:url("../images/mobilecategory.png");
background-position:center center;
background-repeat:no-repeat;
background-size:100%;
width:200px;
height:40px;

但它不工作。

如果有人对此有所了解，请分享。

谢谢！！！

Answer 1

您可以像这样设置下拉菜单的样式：

border-radius:0px !important;
-webkit-border-radius:0px !important;
border-top-left-radius:0px !important;

border: 1px #abc1cf solid !important;

-webkit-appearance: none;  /*Removes default chrome and safari style*/
-moz-appearance: none;  /*Removes default style Firefox*/
background: url('../images/arrow.png')  no-repeat;
background-position: right center;
text-indent: 0.01px; 
text-overflow: ""; 
color: #6b6b6b;  
font-weight:bold;

试试这个。