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

Question

I want to style drop down list for mobile browser.

It is looking like this :

and I want to make it like this :

I have applied some CSS, like :

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

but it is not working.

If anyone have some idea about it, please share.

Thanks!!!

Answer 1

you can style the drop down like this :

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;

try this.