CSS/HTML:在输入字段周围创建发光边框 [英] CSS/HTML: Create a glowing border around an Input Field

问题描述

我想为我的表单创建一些不错的输入，我真的很想知道 TWITTER 如何在输入周围设置发光边框.

I want to create some decent inputs for my form, and I would really like to know how TWITTER does their glowing border around their inputs.

Twitter 边框的示例/图片:

Example/Picture of the Twitter border:

我也不太清楚如何创建圆角.

I also don't quite know how to create the rounded corners.

推荐答案

给你:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

现场演示: http://jsfiddle.net/simevidas/CXUpm/1/show/

(要查看演示代码，请从 URL 中删除show/")

(to view the code for the demo, remove "show/" from the URL)

label { 
    display:block;
    margin:20px;
    width:420px;
    overflow:auto;
    font-family:sans-serif;
    font-size:20px;
    color:#444;
    text-shadow:0 0 2px #ddd;
    padding:20px 10px 10px 0;
}

input {
    float:right;
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;    
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

<label> Aktuelles Passwort: <input type="password"> </label>
<label> Neues Passwort: <input type="password"> </label>

这篇关于CSS/HTML:在输入字段周围创建发光边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！