强调html提交按钮的正确方法？

Posted 2023-02-24

【中文标题】强调html提交按钮的正确方法？

【英文标题】：Proper way to emphasize html submit button?

【发布时间】：2010-10-27 02:19:11

【问题描述】：

如果您必须为您的 html 按钮设置样式，那么强调其中一些按钮的正确方法是什么？例如“添加到购物车”通常在视觉上强调以使其脱颖而出。

选项 1 - 在 em 或 strong + css 中包装提交

选项 2 - 类 + css

选项 3 - ?

【参考方案1】：

CSS 是要走的路。例如，在 Facebook“Notes”应用程序中，“Publish”按钮为深蓝色，其他为灰色。这一切都是通过 CSS 类和 ID 完成的。

最终，如果您想对 CSS 提出第二意见，您应该只寻找您信任的网站。像Firebug 这样的工具可以很容易地看到他们是如何做样式的。

【参考方案2】：

类可能是您最灵活的解决方案。如果你想做的不仅仅是粗体或斜体，那么无论如何你都必须使用某种类/ID。

但是，如果您在容器中拥有此项目，那么您可以使用该容器来选择您的按钮。

html

<div class="foo">
  <input type="submit" />
</div>

css

.foo input

 ...some styles

不过，将类放在输入上是完全可以接受的。前一种方法仅适用于容器中已有按钮并且不想添加任何额外标记的情况。

【参考方案3】：

好吧，如果你想强调一个按钮，我想说最语义化的表示是包装你的<button>标签（或<input type="submit">或任何你正在使用的）在<em>标签中并在CSS中设置样式，例如：

em button 
    color: blue;
    font-style: normal;
    font-weight: bold;

（请记住，虽然斜体和粗体可能是大多数浏览器中 <em> 和 <strong> 的默认视觉样式，但这只是惯例。如果您不是“强烈”强调某些内容，甚至可以使用 <em>如果你希望它显示为粗体。）

【参考方案4】：

正确的语义方式是

<button><em>label</em></button>

但由于 IE 不支持多个元素，因此您必须使用 -- 并将其包装在 em 或其他东西中是不好的。

我更喜欢

<input type="button" class="emphasized"/>

什么的..

【讨论】：

为什么在 em 中包含输入按钮不好？这是一个有效的语义解决方案，那么它的坏处是什么？

因为输入元素通常不受周围 或 的影响。对我来说，这看起来像是一个空洞的强调，其中恰好有一个按钮。如果我必须离开标准的浏览器行为，我也可以使用一个类。

【参考方案5】：

使用 CSS2+，您可以使用选项 3：仅 CSS

input[type="submit"] 
    border: 3px solid blue;

更多信息：http://www.w3.org/TR/CSS2/selector.html

【讨论】：

我喜欢...而且谁在乎 IE6 :)

【参考方案6】：

我会使用图像按钮...没有任何重点可以与精心设计的图标的美感相提并论...

“一张图抵千言！”

【参考方案7】：

问一个开放的问题，得到一堆正确但不同的答案......

大多数人只是选择图像作为按钮，因为这样可以绕过很多浏览器问题。你知道它在每个浏览器上看起来都是一样的。

您可以使用 CSS 来设置您用来提交的元素的样式。走这条路，你可以使用 和适当的样式，或者你可以使用 [lable goes here]。我更喜欢后者，因为它更容易设计，但这主要是个人喜好。

最好的建议是环顾四周，当你看到你想要的东西时，看看他们是如何做到的。

【参考方案8】：

考虑此类问题的一个好方法是考虑您希望从听觉浏览器中获得什么。在这种情况下，如果您的页面正在被读出，您是否还希望通过与其他按钮不同的音调或音量来强调该按钮。如果是这样，您应该使用语义标记来表明这是重点，而不仅仅是表示。

应该真正用于强调单个单词以指示重音应该放在句子中的位置，因此除非您的按钮出现在句子中间，否则我宁愿将输入元素包装在 中比。

另外，你可以添加CSS来获得你想要的视觉效果。

【讨论】：

我很少在句子中间放置一个按钮，但我确实希望它大声喊出“立即购买！”...也许强是答案。

【参考方案9】：

很多网站都使用图片。一个问题可能是不一致 - 您必须制作所有按钮图像，否则它们都不会或有些看起来不合适。

我一般会选择：

更大的字体大小 (font-size: 120%) 粗体字 (font-weight: bold) 填充（水平多于垂直，例如padding: 4px 8px）

我不改变颜色，因为平台变化很大。对于大多数人来说，灰色文本可能看起来不错，但如果用户使用较暗的主题，那么按钮背景颜色可能会使文本无法阅读。

如果您开始更改任何颜色，您至少需要设置color、background-color 和border。