Extra padding in select option element in chrome

问题

I have a select element where I enable users to choose the classification and description. In chrome browser only, I have an extra padding which I am not able remove with padding:0 or with other css tags. Screen from Chrome

However, the same element in other browsers does not have any padding. See example screen from firefox.Screen from Firefox

Any idea why this can be the case?

Thank you

回答1:

This may help reset all the browser-specific styling for select elements:

-webkit-appearance:none;
-moz-appearance:none;
appearance:none;

回答2:

UPDATE #2 Based on my own experience, and those of users on the google forums, this only seems to affect users on Windows 8 and Windows 10 displays with touch-sensitive screens. (Please ignore my previous update re: Windows 10 and font-scaling!)

See here: Chrome Support Forum - Dropdown Option Height

The appearance css does nothing to fix it (note that if you put the appearance styles on the select element, then the drop-arrow disappears)

Here's some sample code - happens only on my touch-sensitive laptop, and only in Chrome. All of my other machines render correctly. IE and firefox render correctly in all machines.

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        html, page, body 
        { 
            padding:0; border:0; margin:0;
            font-family:Tahoma, Verdana, sans-serif;
            font-size:12px;
        }
        select {
            padding: 0px 8px;
        }
        option {
            -webkit-appearance:none;
            -moz-appearance:none;
            appearance:none;
        }
    </style>
</head>
<body>
    <div style="padding:20px;background-color:#887b93">
        <select name="vendorId" id="vendorId">
            <option value="">--- Select Vendor ---</option>
            <option value="86">Alexandra</option>
            <option value="5">Alix</option>
            <option value="73">Anna</option>
            <option value="19">Anne</option>
            <option value="60">Avant</option>
            <option value="65">Blue</option>
            <option value="84">Blush</option>
            <option value="21">Carol</option>
            <option value="89">Christos</option>
            <option value="43">Claire</option>
            <option value="25">Cynthia</option>
            <option value="54">Dauphines</option>
            <option value="22">Delphine</option>
        </select>
    </div>
</body>
</html>

来源：https://stackoverflow.com/questions/45446199/extra-padding-in-select-option-element-in-chrome

标签

css

select

padding