DS
0
How to hide the HTML select arrows on Gmail email client?
How to hide the HTML select up-down arrows on gmail email client? I am able to hide them on Apple mail client.
The up-down arrows are not seen on the chrome and firefox browsers but they are visible on the gmail email client irrespective of the browser. I have been trying since 10 hours but unable to hide them.
I have provided the code below. Please let me know how to solve it. Any kind of help will be greatly appreciated.
<select id="country_code" name="country_code" form="phoneform"
style="-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-o-appearance: none;
text-indent: 15px;
text-align: justify;
text-overflow: clip;
border-radius: 0;
-o-border-radius: 0;
border: 1px solid green;
outline: 1px solid red;
background-image: url(caret-image.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 100%, #E5E5E5);
background-repeat: no-repeat;
background-size: 8px 6px;
background-position: 5px center;
background-color: white;
color: #555;
font-family: 'OpenSans-Light', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'sans-serif';
font-size: 14px;
margin: 0;
padding: 0;
overflow: visible;
width: 65px;
height: 32px;
">
<option value="1">1</option>
<option value="20">20</option>
<option value="212">212</option>
</select>
The property
appearance:none;is required to fully hide select arrows. Unfortunately, this property is not supported by Gmail. Maybe you could try to add a parent element with a smaller width than your select andoverflow:hiddenset to hide the right part of the select. But that's not guaranteed to work everywhere either.Thank you Remi for the answer. The gmail link that you gave will help me in determining the css classes. To set the parent over the child element, we need to position the elements (absolute/relative) and use either (top/left) or (margin-top/margin-left) but either of these is not supported by gmail client. It is supported by Apple mail. So how do I overlap the elements?
Try this trick from Mark Robbins to simulate absolute positioning with margins.