移動瀏覽器的樣式下拉列表

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;

嘗試這個。