html5+css实现六位数字密码输入对话框（类似支付宝，微信）

先来看看原型图：

直接上代码：

html

<div class="common-part pay-part">
        <div class="common-dialog pay-dialog">
            <div class="dialog-title">请输入支付密码</div>
            <div class="pay-money">$10000.00</div>
            <div class="pay-password">
                <input type="tel" maxlength="6" class="real-ipt">
                <div class="surface-ipts">
                    <div class="surface-ipt">
                        <input type="password" >
                        <input type="password" >
                        <input type="password" >
                        <input type="password" >
                        <input type="password" >
                        <input type="password" >
                    </div>
                </div>
            </div>
            <div class="btns">
                <button class="cancel-btn">取消</button>
                <button class="confirm-btn">付款</button>
            </div>
        </div>
    </div>

这里代码分为了两层input输入框

底层是type=tel（0-9），设置透明opacity: 0;

表层是type=password。

css{