怎样让input内容文字不移动？

Question

做的伪装六格子输入框，我是直接将格子当背景，然后设置字间距实现的。

.lattice{width: 251px; height: 56px; border: none; background: url('../img/lattice.png') no-repeat; font-size: 30px; color: #a0a0a0;letter-spacing:24px; text-indent: 12px;}

现在的问题就是输入最后一个字的时候 就会整体移动

有什么办法能避免吗？
谢谢大家的回答，宽度设宽点可以，不过有个问题光标会出去

Answer 1

必须input的宽度要大一些，不然肯定会移动的
所以只能盖着input宽度超出的部位了

---

找个div盖住超出部位就可以了

Answer 2

<input maxlength="6" />

Answer 3

    <input type="text" name="" id="" value="" class="lattice" maxlength="6"/>

.lattice {
    width: 273px;
    height: 56px;
    border: none;
    background: url(../img/lattice.png) no-repeat;
    font-size: 30px;
    color: #a0a0a0;
    letter-spacing: 24px;
    text-indent: 12px;
}

Answer 4

input框正好和背景图一样宽吗?input会以你输入的最后的字符为准,前面的会被推出去,让input宽度略微增加一些,不让输入内容整体往左推,应该就没有问题了

Answer 5

            background-position: 0px 0px ;
            background-repeat: no-repeat;
            background-size: 251px 56px;
            background-image: url('../img/lattice.png');

Answer 6

楼上各位正解啊、主要是控制你输入数字的长度