Question

任何人都知道可能导致输入字段右侧出现蓝框的原因是什么？

过去几天，这是我存在的祸根。只是间歇性地出现。每个输入的标记都是这样的：

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

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

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

http://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，因编辑而不得不重新链接图片。

更新：在gcpereira.com上测试链接[无空间] / stuff / test / landing /

Answer 1

我不能在Safari 5.1（10.7）上复制这个，我知道你已经找到了另一种策略，但请尝试-webkit-background-clip并告诉我它是否相关。

-webkit-background-clip: padding-box;

希望它有效！

Answer 2

按Matteo Spinelli修正：

position: relative / absolute
top: 0

这是另一个例子：
（来自Safari 6.0.2;后台应该填充按钮，但它仅在文本下面填写）
http://cl.ly/image/1c1g030n2V0d
http://cl.ly/image/0y3E3u1t391w

webkit中奇怪的box-shadow工件

2 个答案: