您可以在输入按钮的值中设置单个字母的样式吗？

Question

我想分别设置单词SEND 的每个字母的样式。我无法在值字段中插入 HTML，并且我宁愿不使用图像。

<input type="submit" value="SEND" />

我只是希望每个字母都是不同的颜色。你有什么建议吗？谢谢。

Answer 1

使用刻字.js （http://letteringjs.com/）

它允许您根据 CSS 规范设置每个字母的样式，该规范在浏览器中未完全实现。

检查 http://codepen.io/FWeinb/pen/djuIx 例如，

例如

此外，使用 button 而不是 input ：

<button type="submit">SEND</button>
button::first-letter {
    color: red;
}

---

编辑：我只通过使用带有span元素的元素button HTML+CSS创建了一个丑陋的黑客：http://cssdeck.com/labs/apkycgyi

<button type="submit">
  <span>S</span>
  <span>E</span>
  <span>N</span>
  <span>D</span>
</button>
button {
  font-size: 0px;
}
button > span {
  font-size: 16px;
}
button span:nth-of-type(1) {
  color: red;
}
button span:nth-of-type(2) {
  color: blue;
}
button span:nth-of-type(3) {
  color: green;
}
button span:nth-of-type(4) {
  color: yellow;
}