html - Remove text indentation from select (Windows) -
i need cross-browser solution remove padding/text indentation of native select fields. using padding: 0 doesn't seem remove entirely.
here's screenshot of chrome, no text space on left side:
and here's screenshot of firefox, has text space on left side:
however, should remove padding in e.g. edge/ie11/safari, etc. shouldn't firefox solution, rather cross-browser solution.
here's code:
select { font-size: 18px; height: 38px; line-height: 38px; padding: 0; width: 100%; background-color: red; color: #000000; display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border-color: #000000; border-width: 0 0 1px 0; border-style: solid; } option { padding: 0; } <select> <option value="test1">test 1</option> <option value="test2">test 2</option> <option value="test3">test 3</option> </select> fiddle: https://jsfiddle.net/cbkopypv/1/
this of workaround , requires conditionals based on browser. find unlikely true cross-browser solution available.
place select inside container element. give container overflow of hidden , displace select pixels left. require able run different css ie/edge (both work same), firefox , chrome (which works original code).
the following works both ie11 , edge:
select { font-size: 18px; height: 38px; line-height: 38px; padding: 0; width: 100%; background-color: red; color: #000000; display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border-color: #000000; border-width: 0 0 1px 0; border-style: solid; margin-left: -2px; } option { padding: 0; } .container { overflow: hidden; } <div class="container"> <select> <option value="test1">test 1</option> <option value="test2">test 2</option> <option value="test3">test 3</option> </select> </div> for firefox, use margin-left: -4px
wiki


Comments
Post a Comment