如何制作具有平面外观的输入提交按钮？

Question

我在这里有一个提交按钮：

<input type="submit" value="submit" />

我想添加一些额外的样式，使其外观平整：

input {
    border: 0;
    background: none;
    -webkit-appearance: none;
}

这是它后来的样子：

但是，如果仔细观察，提交按钮顶部仍有一些边框...... 是否有某种方法可以去除凹陷或凸起的表面并使其看起来平坦？

Answer 1

您需要将border，box-shadow和background设置为0 / none以删除按钮上显示的任何灰色外观。然后删除圆角设置border-radius为0px。

规则是：

input[type="submit"]  
/* Or better yet try giving an ID or class if possible*/
{
 border: 0;
 background: none;
 box-shadow: none;
 border-radius: 0px;
}

Answer 2

outline: none;是我的第一个猜测。

此外，您可能希望删除:focus州和:hover州

input[type="submit"]:focus {
background:none;
outline: none;
border:none;
}


input[type="submit"]:hover {
background: none;
border: none;
outline: none;
box-shadow: none;
}

这样就可以在按下它时强调轮廓。

如果不起作用，请尝试删除其他样式，例如box-shadow:none;，border-radius:none;。

Answer 3

我看到按钮角是圆角的。也许这是由影响它的其他风格引起的。尝试删除border-radius，如下所示：

input {
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-appearance: none;
}

如果这没有解决问题，那么您需要检查添加顶部边框的样式。您可以尝试使用带有边框声明的CSS !important（不推荐使用btw）：

input {
    border: 0 !important;
    border-radius: 0;
    background: none;
    -webkit-appearance: none;
}

Answer 4

input { 
  border: 0 none hlsa(0,0%,0%,0);
  outline: 0 none hlsa(0,0%,0%,0);
  box-shadow: none;
  background: none;
  -webkit-appearance: none;
}

即使outline不是浏览器默认设置（AFAIK），但在Bootstrap中（如果您使用它或其他类似的框架）outline即使它未以计算样式显示也会应用border-radius。我还在寻找那个问题。顺便说一句，我没有添加foreach，因为我觉得你可能想要圆角，这应该不是问题。