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

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;。