Question

我在点击密码字段并启用大写锁定时出现的小灰帽锁定通知图像出现问题。在箱子外面显示大约二十个像素的地雷。这会导致阻塞，因此用户无法看到位于该位置的div层。

有人可以告诉我为什么我的密码字段里面没有显示以及我怎么能把它放进去？

我的HTML表单已经用css编辑，在框上显示图像背景，所以我想象它与css有关。

但是我找不到与之相关的任何内容。感谢。

代码：

<style>



#main{
        width:440px;
        height:0px;
        margin-top:1px;
        margin-left:10px;
        margin-bottom:0px; 
        position:relative;
        text-align:left;
    }

    #main form{
        width:440px;
        height:0px;
        padding-bottom:0px;
    }

    #main form .row{
        position:relative;

    }

    #main form .row.error:after,
    #main form .row.success:after{
        content:'';

        position:absolute;
        right: 60px;
        top: 8px;
        width:32px;
        height:32px;
        background:url('../img/icons.png') no-repeat;
        margin-right:50px;
    }

    #main form .row.error:after{
        background-position: 0 -79px;
    }

    #main form input[name=email],
    #main form input[name=password]{

        border:none;
        background:url('http://www.playtimeboys.com/img/form/text-boxes.png') no-repeat top left;
        font:14px 'Segoe UI','Arial',sans-serif;
        color:#888;

        outline:none;

        height: 48px;
        margin-top:22px;
        margin-left:-10px;
        padding: 0 10px 0 50px;
        width: 350px;
    }



    #main form .email input{
        background-position:0 -96px;
    }

    #main form .email input:focus{
        background-position:0 -144px;
    }


    #main form .password input{
        background-position:0 -193px;
    }

    #main form .password input:focus{
        background-position:0 -241px;
    }



    /*----------------------------
        The Submit Button
    -----------------------------*/


    #main form input[type=submit]{

        border: 1px solid #004C9B;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
        color: #D3EBFF;
        cursor: pointer;
        display: block;
        font: bold 24px Cambria,"Hoefler Text",serif;
        margin-top: -46px;
        margin-left:360px;
        padding-top: 7px;
        padding-bottom: 10px;
        text-shadow: 0 -1px 0 #444444;
        width: 100px;
        height:45px;
        position:absolute;
        z-index:100;

        background-color:#0496DA;

        background-image: linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -o-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -moz-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -webkit-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -ms-linear-gradient(top, #0496DA 0%, #0067CD 100%);
    }

    #main form input[type=submit]:hover{

        background-color:#0383d3;

        background-image: linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -o-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -moz-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -webkit-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -ms-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        position:absolute;
        z-index:100;
    }

    #main form input[type=submit]:active{

        background-color:#026fcb;

        background-image: linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -o-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -moz-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -webkit-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -ms-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        position:absolute;
        z-index:100;
    }



    </style>
        </head>


    /*----------------------------
        The HTML
    -----------------------------*/


        <body>
            <div id="main">


                 <form action="login.php" method="post"  >

                    <div class="row email">
                        <input type="email" id="email" name="email" placeholder="Email" value="<?php echo htmlentities($email); ?>" />
                    </div>

                    <div class="row password">
                        <input type="password" id="password" name="password" placeholder="Password" value="<?php echo htmlentities($email); ?>" />
                    </div>
                    <input type="submit" name="submit" value="Login >"  />
                </form>
            </div>
        </body>
    </html>

Answer 1

问题出在本节：

#main form input[name=email],
#main form input[name=password]{
    [...snip...]
    height: 48px;
    margin-top:22px;
    margin-left:-10px;
    padding: 0 10px 0 50px;
    width: 350px;
}

你的场地太宽了;大写锁定图像通常显示在文本字段内。此外，内容框的高度太大，并使通知程序显示得特别大。请尝试改为：

    height: 28px; // height of image - 20px
    margin-top:22px;
    margin-left:-10px;
    padding: 10px 10px 10px 50px; // extra 20px of padding on height
    width: 280px; // proper width of image, so contents don't overflow

为了理解为什么会发生这种情况，有必要记住，即使你对文本提出的风格很苛刻，它仍然存在于某个地方;一旦你应用了一个样式，底层文本字段的实际边界就很难看到了。如果您发现某些文本字段或其他表单小部件的格式要执行，则可以帮助禁用从默认外观更改它们的样式，例如border:none;，并查看系统认为小部件的外观。从那里可以更容易地发现错误的位置。

灰色大写锁定通知图像显示在密码字段？

1 个答案: