1. ホーム
  2. html

[解決済み] CSS/HTMLです。入力フィールドの周りに光るボーダーを作成する

2022-04-20 08:31:13

質問

フォームにきちんとした入力項目を作りたいのですが、TWITTERの入力項目の周りに光るボーダーをどのように作っているのか、ぜひ教えてください。

Twitterのボーダーの例/写真。

また、角丸の作り方がよくわかりません。

どのように解決するのですか?

はい、どうぞ。

.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>