添加填充以在Mac OS X上提交按钮

时间:2015-03-02 01:20:27

标签: html css input padding

我在向提交按钮添加填充时遇到问题。我在JSFiddle中创建了一个超简单的例子:

http://jsfiddle.net/yxr197pa/1/

以下是代码:

HTML:

<input type="submit" value="Submit" />

CSS:

input {
    padding: 20px;
}

我一定不能让事情变得非常简单,而且我有点尴尬,我无法弄明白。似乎没有其他人有这个问题,因为我已经进行了相当广泛的搜索。我甚至看到人们添加填充没有问题的例子。非常感谢任何帮助。谢谢!

更新

为那些可能会被我提出的问题困惑的人澄清问题:上面的代码不会以任何方式改变按钮的填充。它似乎应用于按钮的默认填充,但我指定的填充根本不显示。这是一张描述我在输入上述代码时看到的内容的图片:

http://i.imgur.com/9RxGJUo.png

这个问题已在下面的答案中修复,但根本原因对我来说仍然是一个谜。它似乎与我的电脑有关。我使用完全最新的Mac OS X.另一方面,我的PC完全正常地呈现上面的例子。在我的Mac上使用哪种浏览器并不重要,它仍然无法呈现我指定的填充。

这不是故事的结尾,因为在分析了其他网站上的源代码之后,我发现提交按钮正在我的Mac上正确渲染填充,并且代码实际上是相同的。见这里:

http://htmlandcssbook.com/code-samples/chapter-14/styling-submit-buttons.html

那么为什么有时会渲染填充而不是其他渲染?

2 个答案:

答案 0 :(得分:3)

根据上面的评论,你说你在Mac(OS X)上..

因此,您需要将appearance元素的input属性设置为none才能使填充有效。我继续添加-webkit / -moz供应商前缀属性:

input {
  padding: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
<input type="submit" value="Submit" />

这似乎是那些奇怪的跨浏览器不一致之一,因为这似乎不是Windows上的问题。

答案 1 :(得分:-1)

在我看来,你不能在输入中添加填充。

我认为最接近的是增加输入的高度和宽度。