CSS가있는 용지 양식을 모방하십시오

Question

용지 링크 격자 상자의 배경을 가진 CSS로 입력 상자를 그릴 수있는 방법이 있습니까?

뭔가 같이,

사용자가 데이터, 그 다음에 하나 개의 박스에서의 커서 이동에 들어간다.

Answer 1

가능해야합니다. 등고선 글꼴을 background, line-height 및 letter-spacing CSS 속성과 함께 사용하십시오. 실험!

jsFiddle.

Answer 2

하나의 입력란 대신 25 개의 이미지를 사용할 수 있습니다! : D

Answer 3

css로 배경을 만들고 monotype 글꼴을 선택하십시오. 다음은 간단한 해결책입니다.

일부 CSS :

<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'> 
<style> 
input { 
    /* background grid */ 
    background: white; 
    background-image: -webkit-repeating-linear-gradient(left, 
     white 0px,  white 20px,  black 21px,  white 22px, 
         white 40px,  black 41px,  white 42px); 
    border: 1px solid black; border-right: 0; 

    /* magic width */ 
    width: 252px; 

    /* font font font ... */ 
    font: normal 2em/1em 'Cutive Mono', serif; 
    letter-spacing: 2px; 

    /* not really important */ 
    padding: 0; margin: 0; 
    -webkit-appearance: none; 
    outline: none; 
} 
</style> 

및 일부 HTML

<input type="text" value="hallo welt"/> 

// 편집 : 반복 선형 구배가 caniuse.com (http://caniuse.com/#feat=css-repeating-gradients을)에 대해 살펴 들어 일반적으로 추가 공급 업체 태그없이 지원.

background-image: repeating-linear-gradient(left, 
     white 0px,  white 20px,  black 21px,  white 22px, 
         white 40px,  black 41px,  white 42px);