我在向提交按钮添加填充时遇到问题。我在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
那么为什么有时会渲染填充而不是其他渲染?
答案 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)
在我看来,你不能在输入中添加填充。
我认为最接近的是增加输入的高度和宽度。