正如你可以看到从上面的图片,我的电子邮件按钮边框显示灰色和白色时,边框颜色设置为显示白色边框。我已经张贴了下面的代码:
.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>
1条答案
按热度按时间ggazkfy81#
您将遇到浏览器默认实现的输入元素边框。
默认情况下,大多数浏览器的上边框会比上边框暗一些,这样输入框看起来就像是嵌入到页面中一样。像
border-color
那样指定前景色并不会覆盖border-style: inset
的默认值,可以通过指定实边框来覆盖它,这样颜色就统一了:或者更简洁些: