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:

chrome

and here's screenshot of firefox, has text space on left side:

firefox

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

here's fiddle ie/edge





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -