输入按钮不响应 CSS答案

【问题标题】：Input Button Not Responding To CSS输入按钮不响应 CSS
【发布时间】：2013-11-13 04:47:09
【问题描述】：

我有一个应该很大的输入按钮。然而，在当前的 CSS 中，它只能扩展。高度未触及。

HTML：

<form action="feedback.cfm" method="POST">
    <input type="hidden" name="send" value="mail" />
    <input class="hugeButton" type="submit" value="Click Me To Send A SpreadSheet Report" />
</form>

CSS：

<style type="text/css">
    .hugeButton {
        width:100%;
        height:45%;
        font-size:x-large;
    }
    .hugeButton:hover {
        cursor:pointer;
    }
</style>

现在，如果我将 border:none 添加到我的 .hugeButton 类中，那么 height 属性就会起作用。

所以我的问题是：为什么输入按钮的边框会“禁用”高度属性？

注意：我使用的是谷歌浏览器。

【问题讨论】：

这不是一个完整的答案，但你可能会有更好的造型而不是输入 type="submit" 语法。
@JoshC 所以删除按钮输入周围的边框会将其变成内联按钮？
@jameslafferty 我试图弄清楚为什么移除按钮周围的边框效果能够按高度调整它的大小，而当有边框时，你不能。
@RUJordan 我误读了这个问题。撤回了那个。至于边界，我不确定。但是，您应该注意，0 的主体的 45% 也是 0。请参阅jsfiddle.net/JoshC/uKpY6
@RUJordan 这是另一个小提琴示例，显示了替代标记比较，除了边框：无比较：jsfiddle.net/jameslafferty/KDFBE 看起来设置边框：无也设置 -webkit-appearance：无。

标签： html css macos

【解决方案1】：

您需要为文档指定一个高度，因为您的按钮的高度将与祖先的高度相关。添加：

html,body,form {
    height:100%;
}

jsFiddle example

【讨论】：

呃，这行不通。按钮仍然是带边框的正常高度。没有边界，它可以工作。
它工作正常。你使用的是什么浏览器？你看过小提琴吗？
Chrome，是的。我什至编辑了我的运行脚本，它没有改变任何东西。
所以在小提琴中你看不到按钮现在占据了适当的高度，而之前没有？你在什么操作系统上？我刚刚阅读了您的编辑。根据您发布的代码，更改边框不会做任何事情。试一试，你会看到的。
Mac OSX，它看起来像一个普通的按钮，只是在我删除边框之前它根本不受影响。

【解决方案2】：

我认为这最终变得非常复杂。似乎 -webkit-appearance 的默认值在这里起作用。

当我查看开发工具中的元素面板时，我看到 -webkit-appearance 的以下值：

<button>（带边框）：按钮
<input type="submit">（带边框）：按钮
<button> 或 <input type="submit">（无按钮）：无

我认为 -webkit-appearance:push-button 是罪魁祸首。

看到这个小提琴：http://jsfiddle.net/jameslafferty/KDFBE/

【讨论】：