Html 如何制作具有平面外观的输入提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34543313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a input submit button with flat look?
提问by Karl Bao
Here I have a submit button:
这里我有一个提交按钮：
<input type="submit" value="submit" />
And I want to add some additional styles to make it a flat look:
我想添加一些额外的样式，让它看起来很扁平：
input {
border: 0;
background: none;
-webkit-appearance: none;
}
This is how it looks afterwards:
这是之后的样子：
However, if you look carefully, there is still some border on the top of the submit button...... Is there some way to remove the sunken or raised surface and make it a plain flat look?
不过仔细一看，提交按钮的顶部还是有一些边框的……有什么办法可以去掉凹陷或凸起的表面，让它看起来很平坦？
回答by kushalvm
You will need to set border, box-shadow and background to 0/none to remove any greyish appearance as seen on button. Then to remove the rounded corners set border-radius to 0px.
您需要将 border、box-shadow 和 background 设置为 0/none 以删除按钮上看到的任何灰色外观。然后删除圆角将边框半径设置为 0px。
Rules are :
规则是：
input[type="submit"]
/* Or better yet try giving an ID or class if possible*/
{
border: 0;
background: none;
box-shadow: none;
border-radius: 0px;
}
回答by Itamar Gronich
outline: none;would be my first guess.
outline: none;将是我的第一个猜测。
And also you would probably want to remove the :focusstate and :hoverstate as so
而且您可能希望删除: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;
}
this makes it so when it is pressed, it won't have an emphasized outline.
这使得当它被按下时，它不会有一个强调的轮廓。
if it doesn't work try removing other styles such as box-shadow:none;, border-radius:none;.
如果它不起作用，请尝试删除其他样式，例如box-shadow:none;, border-radius:none;。
回答by shadeed9
I see that the button corners are rounded. Maybe this is caused by other styles that affecting it. Try to remove the border-radiuslike this:
我看到按钮角是圆形的。也许这是由影响它的其他样式引起的。尝试删除border-radius这样的：
input {
border: 0;
border-radius: 0;
background: none;
-webkit-appearance: none;
}
If that didn't solve the issue, then you need to check what style that is adding the top border. You can try using CSS !importantwith the border declaration(not recommended btw) :
如果这没有解决问题，那么您需要检查添加顶部边框的样式。您可以尝试使用!important带有边框声明的CSS （顺便说一句不推荐）：
input {
border: 0 !important;
border-radius: 0;
background: none;
-webkit-appearance: none;
}
回答by zer00ne
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;
}
Even though outlineisn't a browser default (AFAIK), in Bootstrap (if your'e using it or another simular framework) outlineis applied even though it's not showing in computed style. I'm still looking for that question concerning that. Btw, I didn't add border-radiusbecause I figure you might want rounded corners, and it shouldn't be a problem.
即使outline不是浏览器默认值 (AFAIK)，在 Bootstrap 中（如果您使用它或其他模拟框架）outline也会应用，即使它没有以计算样式显示。我仍在寻找与此相关的问题。顺便说一句，我没有添加，border-radius因为我认为您可能想要圆角，这应该不是问题。
