macos CSS:Mac 上的 Safari 不符合我的提交按钮样式
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1681826/
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
CSS: Safari on Mac doesn't adhere to my Submit Button style
提问by Teddi
I have applied the following CSS to a FORM
submit button:
我已将以下 CSS 应用于FORM
提交按钮:
font:normal 15px helvetica,arial,sans-serif;
padding:6px;
On Windows, regardless of the browser (IE/Firefox/Chrome), this increase the FORM submit button and give the button spacing padding of 6px.
在 Windows 上,无论浏览器(IE/Firefox/Chrome)如何,这都会增加 FORM 提交按钮并将按钮间距填充为 6px。
However, on OS X (Mac), the form submit button is not stylized at all. Meaning, the font size is the default and no padding is being applied.
但是,在 OS X (Mac) 上,表单提交按钮根本没有风格化。意思是,字体大小是默认值,没有应用填充。
Any idea on how I can make a FORM submit button bigger on OS X (Mac)?
关于如何在 OS X (Mac) 上使 FORM 提交按钮变大的任何想法?
回答by Sergey
You need to add this to your CSS:
您需要将此添加到您的 CSS:
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
回答by Justin Kramer
In Safari 4, padding and sizes won't take effect on submit buttons unless you set a background or border. Example:
在 Safari 4 中,除非您设置背景或边框,否则填充和大小不会对提交按钮生效。例子:
background: #ccc; /* without this, the other styles won't show up */
font: normal 15px helvetica,arial,sans-serif;
padding: 6px;
回答by Jordan S. Jones
Instead of using <input type="submit" />
use <button type="submit">Submit Text</button>
, if I remember correctly, this has much better support for css stylings.
如果我没记错的话,它不是使用<input type="submit" />
use <button type="submit">Submit Text</button>
,而是更好地支持 css 样式。
回答by Scott Saunders
Make an image button. Safari will not style buttons, or checkboxes, or drop down menus, etc.
制作一个图片按钮。Safari 不会设置按钮、复选框或下拉菜单等的样式。
回答by DisgruntledGoat
Styling form controls is very problematic. See this example- while other browsers apply some styles, all the buttons look nearly identical in Safari.
样式表单控件非常有问题。看这个例子——虽然其他浏览器应用了一些样式,但所有按钮在 Safari 中看起来几乎相同。
One solution is to use a <div>
with the onclick
JavaScript attribute. This way you can apply standard CSS normally. I'd recommend starting with a button then using JS to switch in the better-looking code as progressive enhancement.
一种解决方案是将 a<div>
与onclick
JavaScript 属性一起使用。这样您就可以正常应用标准 CSS。我建议从一个按钮开始,然后使用 JS 来切换更好看的代码作为渐进式增强。