Question

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

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

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

Answer 1

使用Lettering.js（http://letteringjs.com/）

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

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

此外，请使用button代替input：

<button type="submit">SEND</button>

button::first-letter {
    color: red;
}

编辑：我只使用button元素和span元素创建了一个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;
}

你能在输入按钮的值内设置单个字母的样式吗？

1 个答案: