在输入字段中为每个字母分隔框 [英] Seperate boxes for each letter in an Input field

问题描述

我的意思是这些方块;我想模仿一个真正的形式，但我不知道如何去做这个..我知道这是不可能的普通的HTML，可能需要一些JavaScript / jQuery的;在线表单的一个例子也很感谢！

image description here>

解决方案

我不认为你需要任何js。您只需要：

• 一个盒子的图像


• 一个等宽字体


• 有些玩弄css值


• 一些幻想

看到这个应用于输入字段的CSS：

  #text {
 background-image：url（square.gif） ; 
 width：195px; 
 height：18px; 
 background-size：20px; 
 border：none; 
 font-family：monospace; 
 font-size：13px; 
 padding-left：5px; 
 letter-spacing：12px; 
} 
  

一个例子：

http://jsfiddle.net/w564j/

I mean these boxes ; I want to imitate a real form but im not sure how to go about this.. I know it's not possible with normal html and might require some javascript/jquery; An example of this form online is also appreciated!

解决方案

I dont think you need any js for this. You only need:

• An image of a box
• A monospaced font
• Some playing around with css values
• Some Phantasy

See this CSS applied to an input field:

#text{
    background-image: url("square.gif");    
    width: 195px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 12px;
}

an example here:

http://jsfiddle.net/w564j/

这篇关于在输入字段中为每个字母分隔框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！