Html 去除按钮的阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32459646/
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
Removing the shadow from a button
提问by LarsChung
The button I want is the one at bottom, but the one I have is the top.
我想要的按钮是底部的按钮，但我拥有的按钮是顶部的按钮。
The problem arises from the fact that the top button in HTML:
问题源于 HTML 中的顶部按钮：
<form class="button_to" method="get" action="/"><input type="submit" value="Ok" /></form>
and the bottom button in HTML:
和 HTML 中的底部按钮：
<button type="button">Ok</button>
The CSS for the top button is:
顶部按钮的 CSS 是：
.signup-success input[type="submit"],
.signup-success input[type="submit"]:active,
.signup-success input[type="submit"]:focus {
width: 80%;
background: transparent;
color: #00AA66;
border-color: #00AA66;
}
The CSS for the bottom button is:
底部按钮的 CSS 是：
.signup-success button,
.signup-success button:active,
.signup-success button:focus {
margin-top: 15px;
width: 80%;
background: transparent;
color: #00AA66;
border-color: #00AA66;
}
If it helps the top button is generated from rails .erb extension
如果有帮助，顶部按钮是从 rails .erb 扩展名生成的
<%= button_to "Ok", root_path, :method => :get %>
Help me to get my top button look like bottom button. I've tried to put in code that disable shadows in CSS, but it didn't work :(
帮助我让顶部按钮看起来像底部按钮。我试图在 CSS 中输入禁用阴影的代码，但它没有用 :(
回答by Jevgenijs ?ulins
Use border-style:
使用边框样式：
.signup-success input[type="submit"],
.signup-success input[type="submit"]:active,
.signup-success input[type="submit"]:focus {
width: 80%;
background: transparent;
color: #00AA66;
border-color: #00AA66;
border-style: solid;
}
or combined version (border-style, border-width and border-color in one):
或组合版本（边框样式、边框宽度和边框颜色合二为一）：
border: 2px solid #00AA66;
回答by Aayushi
Or you can simply give border: noneto your button
或者你可以简单地给border: none你的按钮
回答by Dan Kaiser
Funny enough adding a border to the button fixed safari's weird drop shadow.
为按钮添加边框修复了 safari 奇怪的阴影，这很有趣。
border: 1px solid #34c1e5;回答by Jose Luis Rasmussen Garcia
Just add a border of your own.
只需添加您自己的边框。
border: 1px solid black;
Or remove the border.
或者去掉边框。
border: none;
