9

I have three dropdown lists (three <select> elements). I styled them with the css:

.dropdown{
    font-size: 20px;
    background: white;
    border:none;
    position: relative;
}

In chrome they look perfectly fine. However when I test the site on my iPhone 6s (ios 10.2.1) on Safari the result is a bit different as shown in the image: enter image description here

As you can see there's that gradient in background and near the arrow the background is black.

How can I style the <select> elements so I would have background white on ios either?

snecserc
  • 615
  • 1
  • 6
  • 19

2 Answers2

36

Try adding this CSS to disable Ios' default styling:

-webkit-appearance: none;

This will also work on other elements that get special styling, like input[type=search].

Stian Martinsen
  • 654
  • 5
  • 9
  • 2
    In addition to this answer, please also take note ``s with other `html` elements. Again, you have multiple options. – tao Feb 10 '17 at 11:21
  • 2
    @StianMartinsen, that will also hide the arrow which is not what I wanted. So is there a workaround to replace the arrow? – snecserc Feb 10 '17 at 11:28
  • Yes, making -webkit-appearance: none; hides dropdown arrow, I could not have find the solution for it so far as well. – Muhammad Junaid Iqbal Jul 26 '23 at 07:20
5

As Stian Martinsen suggested -webkit-appearance: none; disable default styling of <select> tag, but it also hides the arrow. So I find a workaround with this code:

.dropdown{
   font-size: 20px;
   background: white;
   border:none;
   position: relative;
   -webkit-appearance: none;
        padding-right: 10px;
  }
  .dropdown:focus{
   outline: none;
  }
  .plain-selector{
   margin: 0 3px;
  }
  .plain-selector::after{
   content: "";
     position: absolute;
     z-index: 2;
     bottom: 30%;
     margin-top: -3px;
     height: 0;
     width: 0;
     right: 0;
     border-top: 6px solid black;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     pointer-events: none;
  }
  .plain-selector::before{
   content: "";
     position: absolute;
     z-index: 2;
     top: 30%;
     margin-top: -3px;
     height: 0;
     width: 0;
     right: 0;
     border-bottom: 6px solid black;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     pointer-events: none;
  }
  .out-selector{
   position: relative;
  }
     .outter-selection{
      width: 100%;
     }
     .selection{
    display: block;
  margin: auto;
  border-radius: 50px;
  background: white;
  padding: 5px;
  max-width: 360px;
  text-align: center;
  width: 90%;
  position: relative;
 }
body{
   margin-top: 4em;
   background: #2f2f2f;
   color: white;
   font-size: 23px;
  }
<div class="outter-selection">
 <div class="selection">
  <span class="out-selector"><span class="plain-selector"><select class="dropdown">
   <option value="1" selected="selected">select 1</option>
   <option value="2">select 2</option>
   <option value="3">select 3</option>
   <option value="4">select 4</option>
  </select></span></span>
  <span class="out-selector"><span class="plain-selector"><select class="dropdown">
            <option value="1" selected="selected">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
          </select></span></span>
  <span class="out-selector"><span class="plain-selector"><select class="dropdown">
            <option value="1" selected="selected">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
          </select></span></span>
  </div>
 </div>
Community
  • 1
  • 1
snecserc
  • 615
  • 1
  • 6
  • 19