前端开发 | 在线支持

在Safari浏览器下，任何输入框默认都会有一个发光的蓝色边框。如果想在其他浏览器上实现这个效果，可使用CSS 3技巧。需要注意的是，这并不是单独使用box-shadow属性来实现的，该发光输入框是向四周均匀发光.包含一个缓慢发光过渡效果。

【示例】

HTML

<form>
    <div>
        <label for="username">账号：
            <input name="username" type="text" placeholder="请输入账号">
        </label>
    </div>
    <div>
        <label for="password">密码：
            <input name="password" type="password" placeholder="请输入密码">
        </label>
    </div>
    <div>
        <label for="note">留言：
            <textarea name="note" placeholder="请输入留言"></textarea>
        </label>
    </div>
</form>

CSS

input:focus, select:focus, textarea:focus {
    -moz-outline: 2px solid red;
    -webkit-outline: 2px solid #ebc476;
    -moz-outline-radius: 5px !important;
    -webkit-outline-radius: 5px !important;
    outline-radius: 5px !important;
}

input, textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #ddd;
}
input:focus, textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}

下载源代码