html - 为什么 html 表单元素不服从我的 CSS?

标签 html css forms button

我正在尝试使表单元素与其他 DOM 元素适应视觉样式,包括使按钮和文本输入适合在一起,按钮和 div 作为单个视觉元素(就像附加到某些内容 div 的表单按钮一样)背景颜色)。

为什么表单元素不遵循与其他 DOM 元素相同的规则?他们似乎对如何将其他所有 DOM 元素高 10px 有自己的想法。即使我给了他们我能想到的所有 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">无济于事。他们都他妈的

最佳答案

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

这是来自 outdated specification ,但我找不到最近的:(强调我的)

8.1 Styling form controls

The CSS working group is expected to develop a language designed, amongst other things, for the advanced styling of form controls. In the meantime, technologies such as [HTC] and [XBL2] can be used as guides for what is expected.

UAs, in the absence of such advanced styling information, may render form controls described in this draft as they wish. It is recommended that form controls remain faithful to the look and feel of the system's global user interface.

CSS 2.1 explicitly does not define how CSS applies to form controls. [CSS21]

关于html - 为什么 html 表单元素不服从我的 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/998498/

相关文章:

php - 更改程序生成的选择元素列表中特定选择元素的背景颜色

javascript - 如何仅在字段为 $dirty 时应用 ng-pattern

html -::after 和::before 适用于哪些输入类型

html - 在我的标题中进行下拉选择

html - 当导航栏设置为 'position: absolute;' 时,jumbotron div 中的图像覆盖导航栏

javascript - 如何解决 CSS 样式表引用冲突?本地化可行吗?

javascript - Bootstrap 4 旋转木马不会缩小以适应视口(viewport)

java - 提交表单时 Play Framework POST 路由不运行

php - 通过 JS 更新的表单输入未提交

javascript - 单击按钮时如何显示隐藏列