当边框颜色设置为仅显示一种时，为什么我的电子邮件按钮边框显示两种颜色？

Question

从上图可以看出，当边框颜色设置为显示白色边框时，我的电子邮件按钮边框显示为灰色和白色。我已经发布了下面的代码：

HTML

<div class="email">
   <form action="#" class="emailBox" target="_blank" method="post">
      <input type="email" class="emailText" placeholder="enter email for early access" size="">
   </form>
</div>

社会保障局

@mixin border-radius($radius) {
  border-radius: $radius;
    -ms-border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    -webkit-border-radius: $radius;
  background-clip: padding-box;
}

@mixin outline($outline) { 
  outline: $outline;
    -ms-outline: $outline;
    -moz-outline: $outline;
    -o-outline: $outline;
    -webkit-outline: $outline;
}

$bgOverlay: rgba(0,113,188,0.4);
$bgOverlayFull: rgb(0,113,188);
$primaryCopy: rgba(255,255,255,1.0);
$opacityLight: rgba(255,255,255,0.6);
$white: rgba(255,255,255,1.0);

$main-font: Lato, sans-serif;
$header-font: PT+Sans, sans-serif;
$support-font: Monterrat, sans-serif;

$thin: 300;
$regular: 400;
$bold: 700;  

$contentMargin: 18px 0 0 0;

.email {
   margin: $contentMargin;
   margin-bottom: 12px;

   .emailText { 
     @include border-radius(35px);
     @include outline(none);

     background: $bgOverlay;
     border-color: white;
     color: $primaryCopy;
     font-size: 1.6em;
     font-weight: $thin;
     height: 58px;
     padding: 0 0 0 30px;
     width: 61.702127659574%; /* 580px/940px */
   }

   :-ms-input-placeholder{ 
     color: $primaryCopy;
   }
   ::-mox-placehold {
     color: $primaryCopy;
   }
   ::-webkit-input-placeholder {
     color: $primaryCopy;
   }
}

任何帮助将不胜感激！谢谢

Answer 1

您遇到了浏览器对输入元素边框的默认实现。

默认情况下，大多数浏览器将顶部边框的阴影比顶部更暗，因此输入字段看起来嵌入页面中，指定前景色border-color不会覆盖border-style: inset默认值。通过指定实心边框来覆盖它，以便颜色统一：

border-color: white;
border-style: solid;

或不那么详细：

border: solid white;