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