为什么 html 表单元素不服从我的 CSS？答案

【问题标题】：why don't html form elements obey my CSS?为什么 html 表单元素不服从我的 CSS？
【发布时间】：2010-11-03 03:59:08
【问题描述】：

我正在尝试使表单元素与其他 DOM 元素一起适应视觉样式，包括使按钮和文本输入组合在一起，将按钮和 div 作为单个视觉元素（例如附加到某些内容 div 的表单按钮具有相同的背景颜色）。

为什么表单元素不遵循与其他 DOM 元素相同的规则？他们似乎对如何与其他 DOM 元素保持 10 像素高有自己的想法。即使我给他们我能想到的所有 css：

.mybutton, .mylink {
    display: block;
    float: left;
    height: 10px;
    width: 20px;
    margin: 0;
    padding: 0;
    line-height: 10px;
    border: none;
}

我将这两个元素直接相邻，我希望它们连接起来并作为一个单一的视觉元素出现。请不要建议将其全部放在具有适当样式的 div 中 - 我希望按钮和链接具有彼此不同的“悬停”样式。

到目前为止，我可以开始工作的唯一解决方案是让它们都链接并使用 javascript 使用 onClick 事件提交表单。这对于没有 javascript 的人根本不起作用，这很糟糕。

感谢您的帮助！我需要将这些表单元素鞭打成 DOM 服从形状！

PS - 当我试图让按钮和文本输入以类似的方式对齐时，我也注意到了这种效果。也许它只是一般的按钮？我尝试使用<button> 和<input type="button"> 无济于事。他们俩都被他妈搞砸了

【问题讨论】：

标签： html css forms button

【解决方案1】：

他们没有。这就是它的工作原理，我相信Safari比其他浏览器更允许它，但是not everyone likes it

这是来自outdated specification，但我找不到最近的：（强调我的）

8.1 样式化表单控件

CSS 工作组预计将开发一种语言，其中包括用于表单控件的高级样式设计。与此同时，[HTC] 和 [XBL2] 等技术可以用作预期的指南。

UA，在没有此类高级样式信息的情况下，可以按照他们的意愿呈现本草案中描述的表单控件。 建议表单控件保持忠实于系统全局用户界面的外观和感觉。

CSS 2.1 明确没有定义 CSS 如何应用于表单控件。 [CSS21]

【讨论】：

如果不是每个人都喜欢...我当然希望每个人都喜欢没有 javascript 的网站哈哈，因为不是每个人都会像我一样努力寻找解决这个问题的方法

【解决方案2】：

这些按钮上是否有任何文本/值，因为您可能需要更改文本大小，否则会迫使高度变大。如果您可以发布一些html，则更容易回答。乔什

【讨论】：

【解决方案3】：

是的，你不能。我发现自己摆弄了很多高度、填充、字体大小和显示属性，以使它们看起来像我想要的那样，甚至它们，在每个浏览器中都不是完美的

【讨论】：

【解决方案4】：

没有办法使用 CSS 来描述大多数表单字段。因此很难改变他们的风格，因为没有一套标准的风格可以覆盖。

例如，看这个how to make button elements look like links的例子

CSS3 规范suggests ways of how it might work in the future

【讨论】：

【解决方案5】：

找到答案...不是其中任何一个...对不起各位:(

元素继承了 3px 的填充（因为样式是使用 id 设置的，而不是我用来使它们相同的类）

显然，当您增加按钮上的内边距时，背景颜色不会变大，但它会在链接上变大。

嘘

【讨论】：