如何将填充添加到< input type ="按钮"&gt ;? [英] How can I add padding to <input type="button">?

问题描述

自从我编写了一些严肃的HTML / CSS代码之后的几个月，所以我可能错过了很多事情，但今天我偶然发现了一件很奇怪的事情。

当我尝试将 padding 应用于< input type =submit> ，它不再工作了。
我约99％的人确信我能够做到这一点，但现在看起来好像是不可能的。

我甚至看过其中一个我的旧项目，我知道我的填充提交按钮，但他们不工作了。

这是一个小问题示例

 < input type =submitvalue =Submitstyle =padding：5px 10px;> 
< button type =submitvalue =Submitstyle =padding：5px 10px;> Submit< / button> 
  

以及它在Mac上的Google Chrome 15中的样子

但是它似乎在Firefox 4中根本不起作用。

这是一个链接到JSbin.com上的演示源代码

我敢打赌，这是在6个月前开始工作的，但是一定会有变化。我一直在使用Windows Vista和OS X Snow Leopard，最近升级到了Lion，但看起来并不像它。

我错过了什么吗？

编辑：修复输入错误DID不帮助。填充仍然不适用于第一个按钮。

edit2：浏览完 Adob​​e Browserlab 它看起来像是OS X的特定问题。我仍然想知道如何在OS X上执行此操作。

解决方案

对我来说OS X Firefox也是如此。解决方法是在应用自己的应用之前禁用浏览器的默认外观：

  input {
 -webkit-appearance：none ; 
 -moz-appearance：none; 
外观：无; 
} 
  

更多资讯： http://css-tricks.com/almanac/properties/a/appearance/

It's been couple of months since I've done some serious HTML/CSS coding, so I've probably missed a lot of things, but today I stumbled upon a really weird thing.

When I try to apply padding to a <input type="submit">, it doesn't work anymore. I'm about 99% sure that I was able to do this, but now it seems as if it was impossible.

I even looked at one of my older projects, where I know I had padding on submit buttons, but they don't work anymore.

Here's a little demo of the problem

<input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>

and how it looks in Google Chrome 15 on Mac

but it doesn't seem to work in Firefox 4 at all

Here's a link to the demo source on JSbin.com

I would bet that this was working about 6 months ago, but something must have changed. I've been using Windows Vista and OS X Snow Leopard with recent upgrade to Lion, but that doesn't seem like it.

Am I missing something?

edit: fixing the typo DID NOT help. The padding still isn't applied to the first button.

edit2: After going through Adobe Browserlab it looks like this is OS X specific problem. I'd still like to know how to do this even on OS X though.

解决方案

This issue was apparent for me too on OS X Firefox. The solution is to disable the browser's default appearance before applying your own:

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

More info at: http://css-tricks.com/almanac/properties/a/appearance/

这篇关于如何将填充添加到< input type ="按钮"&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！