ios/safari/iPhone 上的样式 HTML 选择标签

Style HTML select tag on ios/safari/iPhone

提问by Alin Crescens Ciurea

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

我有三个下拉列表（三个<select>元素）。我用 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:

在镀铬中，它们看起来非常好。但是，当我在 Safari 上的 iPhone 6s (ios 10.2.1) 上测试该网站时，结果有点不同，如图所示：

As you can see there's that gradientin backgroundand near the arrow the backgroundis black.

正如你所看到的，gradient在background箭头内和附近有一个backgroundis black。

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

如何设置<select>元素的样式，以便white在 ios 上也有背景？

采纳答案by Alin Crescens Ciurea

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:

正如 Stian Martinsen建议-webkit-appearance: none;禁用<select>标签的默认样式，但它也隐藏了箭头。所以我找到了这个代码的解决方法：

.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>

回答by Stian Martinsen

Try adding this CSS to disable Ios' default styling:

尝试添加此 CSS 以禁用 Ios 的默认样式：

-webkit-appearance: none;

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

这也适用于其他具有特殊样式的元素，例如 input[type=search]。