webkit 中奇怪的盒子阴影伪影

有人知道是什么导致输入字段右侧出现蓝色框吗？

过去几天这一直是我存在的祸根。仅间歇性出现。每个输入的标记如下所示：

<div class="input text">
    <label for="pass">Password</label>
    <input type="password" name="pass" id="pass" class="required"  tabindex="30"/>
</div>

需要注意的是，标签位于字段顶部，然后在单击/键入时变暗/淡出。

这只发生在 Mac 上的 webkit 上，显然是 Vista 上。

https://i.stack.imgur.com/5BQcv.jpg https://i.stack.imgur.com/5BQcv.jpg

编辑：抱歉，CSS：

input[type="text"], input[type="password"] { 
            height: 30px;
            outline: none;
            -webkit-transition: -webkit-box-shadow 0.3s linear;
            -moz-transition: -moz-box-shadow 0.3s linear;
            transition: box-shadow 0.3s linear;
        }

        .input.text input[type="text"]:focus, input[type="text"]:active, .input.text input[type="password"]:focus, input[type="password"]:active {
            -moz-box-shadow: 0 0 12px #82cce8;
            -webkit-box-shadow: 0 0 12px #82cce8; /* chrome seems to show a smaller box shadow */
            box-shadow: 0 0 12px #82cce8;
        }

        .input.text input, .input.text span.field {
            padding: 10px 15px;
            width: 92%;
            font-size: 2em;
            font-family: 'HelveticaNeueW01-45Ligh', Arial, Helvetica, sans-serif;
            border: 1px solid #cecece;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: -2px -2px 3px rgba(205,205,205, 0.3);
            -moz-box-shadow: -2px -2px 3px rgba(205,205,205, 0.3);
            box-shadow: -2px -2px 3px rgba(205,205,205, 0.3);
        }
            input::-webkit-input-placeholder { color: #e2e2e2;}
            input:-moz-placeholder { color: #e2e2e2;}

包含的 div 只有 20px 的内边距。

另外，抱歉 sdleihssirc，由于编辑而不得不重新链接图像。

我无法在 Safari 5.1 (10.7) 上重复此操作，我知道您已经找到了替代策略，但请尝试-webkit-背景剪辑 http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed出来并让我知道是否相关。

-webkit-background-clip: padding-box;

希望它有效！