javascript - 为什么 Safari 无法正确显示组合框箭头

Question

只有 Safari 会在下面的所有元素上显示箭头。

通常所有浏览器都会显示如下内容:

不能真正发布整个站点，但是相关的 HTML

和一些样式:

#searchMain{
  float:right;
  width: 17rem;
  height:261px;
  margin-left:8px;
    margin-right: 8px;
    margin-bottom: 9px;
}
.searchDiv{
  float:right;
  width: 17rem;
  height: 12.5%;
/*   margin-bottom: .53rem; */
  padding: 0px 0rem 11px 0rem;
  text-align: center;
}

::-webkit-input-placeholder { color: #10376E; }
:-moz-placeholder { color: #10376E; }
::-moz-placeholder { color:    #10376E; }
:-ms-input-placeholder { color:    #10376E; }

#dateFrom:disabled::-webkit-input-placeholder { color: #cccccc; }
#dateFrom:disabled:-moz-placeholder { color: #cccccc; }
#dateFrom:disabled::-moz-placeholder { color:    #cccccc; }
#dateFrom:disabled:-ms-input-placeholder { color:    #cccccc; }

#dateTo:disabled::-webkit-input-placeholder { color: #cccccc; }
#dateTo:disabled:-moz-placeholder { color: #cccccc; }
#dateTo:disabled::-moz-placeholder { color:    #cccccc; }
#dateTo:disabled:-ms-input-placeholder { color:    #cccccc; }


/*
background:url(./down.png) no-repeat right center;
    padding-right:10px;
*/

.searchDiv select,
.searchDiv input{
  margin-bottom:0em;
  width: 256px;
  height: 1.4rem;
  color: #10376E;
  border: solid 1px #10376E;
  border-radius:9px;
    outline: none;
  background-color:rgba(250, 255, 250, 0.7);
}


.searchDiv[select_box='true']:after {
    content:'>';
    font:11px "Consolas", monospace;
    color:white;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    margin: 2px 0px 0px 0px;

    position:absolute;
    pointer-events:none;
}

.disabled
{
    color: #cccccc;
    border: solid 1px #cccccc;
}

.searchDiv[select_box='true']:before {
    content:'';
    right:0px; top:0px;
    width:18px; height:22px;
    background:#10376E;
    position:absolute;
    pointer-events:none;
    display:block;

    -webkit-border-top-right-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-topright: 9px;
    -moz-border-radius-bottomright: 9px;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}


.searchDiv
{
    width:256px;
    overflow: hidden;
    text-align: justify;
    position:relative;
}
.searchDiv select
{
    width:256px;
}
.searchDiv input{  
  padding: 0 3%;

}
.searchDiv input:focus{  
  background-color: white;
  box-shadow: 0px 1px 10px 0px rgba(100, 100, 255, 0.3);
}
.searchDiv h3{
  margin-top: .4em;
  font-weight: bold;
}

#dateFrom,
#dateTo{
  width:49%;
}

.resetSearch{
  width: 256px;
  height:22px;
  text-align: center;
  border-radius:9px;
  background-color:#749FAF;
  padding:.2em;
    background-color: #10376E;
    color: white;
    border: solid 1px #10376E;
}
.resetSearch:hover{
    color: #10376E;
    background-color: white;

}

.resetSearch a, .resetSearch a:visited{
  color: inherit;
  text-decoration:none;

}

我不确定以上信息是否足以理解问题(希望这是众所周知的问题)，但我想阻止 Safari 显示这些箭头并像在其他浏览器中一样呈现它们。

Answer 1

您应该尝试使用伪元素 (::after) 而不是使用伪类 (:after)，这是 CSS3 中引入的区别。

研究:
MDN :after