小编典典

CSS/HTML:在输入字段周围创建发光边框

all

我想为我的表单创建一些像样的输入,我真的很想知道 TWITTER 如何在输入周围做发光的边框。

Twitter边框的示例/图片:

在此处输入图像描述

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


阅读 54

收藏
2022-08-01

共1个答案

小编典典

干得好:

.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/”)

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>
2022-08-01