CODEWITHSUNDEEP
cssselectpadding
Tamerlan Vahabzade
Tamerlan Vahabzade

Reputation: 71

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

Upvotes: 4

Views: 12931

Answers (2)

C.List
C.List

Reputation: 667

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>

Upvotes: 3

nolbuzanis
nolbuzanis

Reputation: 255

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

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

Upvotes: 1

Related Questions