选择>选项上的CSS Safari奇怪 View

Question

我正在自定义网站的输入>选择样式。我注意到当我使用 Chrome 或 Firefox 时它很好，而 Safari 显示特定的渐变。有什么问题？谢谢。

.FormField{width:100%}input.FormField,select.FormField,textarea.FormField{background:#fff !important;outline: none !important;border-radius:0 0 4px 4px;box-sizing:border-box;font:inherit;font-weight:400;height:2.42857em;line-height:1.42857em;padding:.42857em;-webkit-transition:border-color .2s cubic-bezier(.4,0,.2,1);transition:border-color .2s cubic-bezier(.4,0,.2,1);background-color: #ecedee !important;}textarea.FormField{display:block;height:auto;resize:vertical}input.FormField:focus,select.FormField:focus,textarea.FormField:focus{outline:0}.FormField--invalid{border-color:#c33!important}.AccountExplorerSearch{padding:1.5em}.AccountExplorerSearch-title{font-size:1.4em;font-weight:300;margin:0 0 2em;text-align:center}input.AccountExplorerSearch-field{display:block;height:auto;margin:0 auto 3em;max-width:32em;padding:.75em 1em}.Alert{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;background:#c33;box-shadow:0 0 10px rgba(0,0,0,.4);color:#fff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:1.5em;position:relative;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform .2s cubic-bezier(.4,0,.2,1);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.QueryReport-title{color:inherit;font-size:1.5em;font-weight:300;line-height:1;margin:0 0 .667em}.QueryReport-meta{font-weight:300;margin:0 0 1.5em}.QueryReport-item{margin:0 0 1.5em}@media (min-width:1024px){.QueryReport{margin-bottom:2em;padding:2em 2em 0}.QueryReport-item,.QueryReport-meta{margin:0 0 2em}}.ViewSelector,.ViewSelector2{display:block}.ViewSelector2-item,.ViewSelector table{display:block;margin-bottom:1em;width:100%}.ViewSelector2-item>label,.ViewSelector td:first-child{font-weight:700;margin:0 .25em .25em 0;display:block}.ViewSelector2-item>select{max-height: 200px;padding: 0 0 0 4px;margin: 4px 4px 4px 0;position: relative;overflow-x: hidden;overflow-y: auto;-webkit-tap-highlight-color: rgba(0,0,0,0);transform: translateZ(0);}.ViewSelector table,.ViewSelector tbody,.ViewSelector td,.ViewSelector tr{display:block}.ViewSelector table{height:auto!important}.ViewSelector table,.ViewSelector td{width:auto!important}.ViewSelector td:last-child *{display:block;text-align:left}.ViewSelector td:last-child>div{font-weight:400;margin:0}@media (min-width:570px){.ViewSelector,.ViewSelector2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 -1em -1em;width:-webkit-calc(100% + 1em);width:calc(100% + 1em)}.ViewSelector2-item,.ViewSelector table{-webkit-box-flex:1;-webkit-flex:1 1 -webkit-calc(100%/3 - 1em);-ms-flex:1 1 calc(100%/3 - 1em);flex:1 1 calc(100%/3 - 1em);margin-left:1em}}.ViewSelector2--stacked,.ViewSelector--stacked{display:block;margin:0;width:auto}.ViewSelector2--stacked .ViewSelector2-item,.ViewSelector--stacked table{margin-left:0}.u-visuallyHidden{border:0!important;clip:rect(1px,1px,1px,1px)!important;height:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.u-hidden{display:none}.u-block{display:block}@media (min-width:420px){.u-sm-hidden{display:none}.u-sm-block{display:block}}@media (min-width:570px){.u-md-hidden{display:none}.u-md-block{display:block}}@media (min-width:1024px){.u-lg-hidden{display:none}.u-lg-block{display:block}}.u-spaceDouble{margin:0 0 3em}.ViewSelector2-item>option{padding: 5px 7px 4px;margin: 0;cursor: pointer;min-height: 1em;-webkit-user-select: none;}
.ActiveUsers{font-size: 20px;}

<div class="ViewSelector2">  <div class="ViewSelector2-item">    <label>Property</label>    <select class="FormField"><option selected="" value="Test">Demo test</option></select>  </div>  <div class="ViewSelector2-item">    </div></div>

Chrome : 苹果浏览器:

Answer 1

您看到的渐变来自 safari 默认样式。

您可以使用 -webkit-appearance:none; 将其删除

---

阅读更多关于-webkit-appearance here