[解決済み] 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>
関連
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
-
[解決済み] mailto:を使ってメールの件名や内容を設定することはできますか?
-
[解決済み] 入力テキスト要素のボーダーハイライトを削除する方法
-
[解決済み] CSS3のborder-radiusプロパティとborder-collapse:collapseが混ざらないのですが。border-radiusを使用して、角を丸くした折りたたみテーブルを作成するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
document.forms 使用方法
-
[解決済み] 横型リストアイテム
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]