具有多种颜色的按钮文本答案

【问题标题】：Button text with multiple colors具有多种颜色的按钮文本
【发布时间】：2012-07-16 04:44:28
【问题描述】：

我有一个输入按钮元素，我想在其中包含“带我去那里>”字样，但我想让尖括号的颜色与文本的其余部分不同。

这可能吗？如有必要，我很乐意使用 javascript 或 jquery 修复程序。

【问题讨论】：

【解决方案1】：

这个怎么样：http://jsfiddle.net/w3KHd/1/

使用带有跨度的按钮，将字体颜色设置为您想要的任何颜色。例如：

<button>Take me there <span style="color: red"> &gt; </span></button>

更新：

如果您想将该按钮用作提交按钮，请使用：

<button type="submit">Take me there <span style="color: red"> &gt; </span></button>

【讨论】：

除了提供示例链接外，还要在答案中包含代码，这样即使该链接不再有效，该答案仍然有用。
好的，我喜欢这个，但是如果它是一个提交按钮，比如<input type='submit' text='Submit' />
<button type="submit">Take me there <span style="color: red"> &gt; </span></button> 应该可以，对吧？
我认为将 HTML 标签放入按钮元素中对于旧 IE 版本是不利的，因为它们会获取标签之间的任何内容并以表单形式发送。
@BillyMoat，实际上 IE7 和 6 的问题是 <button> won't work unless you specify type=submit... 所以在你的情况下，它适用于所有主要浏览器。 <button type='submit'>Take me there <span style="color: red"> &gt; </span></button> 适用于所有主流浏览器。

【解决方案2】：

如果您可以使用<button> 而不是<input type="button">，则可以使用“first-letter”伪类，如下所示。
你的风格类：

<style>
button:first-letter {
color:red;
}</style>

按钮：

<button type="submit">&lt;Take me there ></button>

【讨论】：