입력 버튼의 값 내에서 개별 문자의 스타일을 지정할 수 있습니까?

Question

SEND라는 단어의 각 문자를 개별적으로 스타일링하고 싶습니다. 값 필드에 HTML을 삽입 할 수 없으며 이미지를 사용하지 않는 것이 좋습니다.

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

나는 단순히 각 문자를 다른 색으로하고 싶습니다. 의견 있으십니까? 고맙습니다.

Answer 1

사용 Lettering.js (http://letteringjs.com/)는

그것은 당신이 완전히 브라우저에서 구현되지 않은 CSS 사양에 따라 각 문자의 스타일을 할 수 있습니다.

체크 예 : http://codepen.io/FWeinb/pen/djuIx

그리고 추가

는 input 대신 button를 사용

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

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

---

편집 : http://cssdeck.com/labs/apkycgyi

: 나는 단지 span 요소 button 요소를 사용하여 HTML + CSS와 못생긴 해킹을 생성

<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; 
}