我遇到了一个问题，当你点击密码字段并打开大写锁时，会出现灰色的小大写锁通知图像。地雷显示在框外大约20像素的右边。这会造成阻塞，因此用户无法看到位于该位置的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>
问题在这部分:
#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;
}
您设置的字段太宽;capslock图像通常显示在文本字段内。此外，内容框的高度太大，使通知显示得特别大。试试相反:
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;)更改的样式，并查看系统认为小部件是什么样子的。从那里可以更容易地发现错误在哪里。