Solve border: none in mobile browser and select; useless and remove small triangle, selectborder
Set the select border to none. There is no problem on the PC side, but the border will still appear in the browser and on the mobile phone.
Solution:
1 appearance: none; 2-moz-appearance: none;/* Firefox */3-webkit-appearance: none;/* Safari and Chrome */
Appearance usage:
1 .elmClass{2 -webkit-appearance: value;3 -moz-appearance: value;4 appearance: value;5 }
Example: Use the appearance attribute to change the appearance of an element
1 <p class = "lookLikeAButton"> I am a paragraph P element </p> 2 <p class = "lookLikeAListbox"> I am a paragraph P element </p> 3 <p class = "lookLikeAListitem"> I am a section P element </p> 4 <p class = "lookLikeASearchfield"> I am a section P element </p> 5 <p class = "lookLikeATextarea"> I am a section P element </p> 6 <p class = "lookLikeAMenulist"> I am a section P element </p>
1/* looks like a button and renders it in the style of a button */2. lookLikeAButton {3-webkit-appearance: button; 4-moz-appearance: button; 5} 6/* looks like a list box, rendered in The listbox style */7. lookLikeAListbox {8-webkit-appearance: listbox; 9-moz-appearance: listbox; 10} 11/* looks like a list, rendering in the listitem style */12. lookLikeAListitem {13-webkit-appearance: listitem; 14-moz-appearance: listitem; 15} 16/* looks like a search box, rendered in the searchfield style */17. lookLikeASearchfield {18-webkit-appearance: searchfield; 19-moz-appearance: searchfield; 20} 21/* looks like a text field, rendered in textarea style */22. lookLikeATextarea {23-webkit-appearance: textarea; 24-moz-appearance: textarea; 25} 26/* looks like a next menu, rendered in the menulist style */27. lookLikeAMenulist {28-webkit-appearance: menulist; 29-moz-appearance: menulist; 30}
For more information, see http://www.w3school.com.cn/cssref/pr_appearance.asp