css 为什么我的电子邮件按钮边框显示两种颜色,而border-color设置为只显示一种颜色?

fdx2calv  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(170)

正如你可以看到从上面的图片,我的电子邮件按钮边框显示灰色和白色时,边框颜色设置为显示白色边框。我已经张贴了下面的代码:

.email {
  margin: 18px 0 0 0;
  margin-bottom: 12px;
}
.email .emailText {
  border-radius: 35px;
  -ms-border-radius: 35px;
  -moz-border-radius: 35px;
  -o-border-radius: 35px;
  -webkit-border-radius: 35px;
  background-clip: padding-box;
  outline: none;
  -ms-outline: none;
  -moz-outline: none;
  -o-outline: none;
  -webkit-outline: none;
  background: rgba(0, 113, 188, 0.4);
  border-color: white;
  color: white;
  font-size: 1.6em;
  font-weight: 300;
  height: 58px;
  padding: 0 0 0 30px;
  width: 61.7021276596%;
  /* 580px/940px */
}
.email :-ms-input-placeholder {
  color: white;
}
.email ::-mox-placehold {
  color: white;
}
.email ::-webkit-input-placeholder {
  color: white;
}
<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>
ggazkfy8

ggazkfy81#

您将遇到浏览器默认实现的输入元素边框。
默认情况下,大多数浏览器的上边框会比上边框暗一些,这样输入框看起来就像是嵌入到页面中一样。像border-color那样指定前景色并不会覆盖border-style: inset的默认值,可以通过指定实边框来覆盖它,这样颜色就统一了:

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

或者更简洁些:

border: solid white;

相关问题