web-dev-qa-db-ja.com

アクティブなときにテキストボックスの周りに光る効果を作成します

テキストボックス内にカーソルを置きながら、テキストボックスの周囲に光る効果を作成します。例：stackoverflow.comの検索テキストボックス内にカーソルを置くだけです。

それはcssのせいですが、私はそれを達成する方法がわかりません..私を助けてください。

htmlcssxhtml
13
praveenjayapal

スタックオーバーフロー検索ボックスで観察される効果はおそらくブラウザ固有（Google Chromeなど）ですが、CSSを使用して目的を達成する方法があります :focus 疑似クラス：

#foo:focus { border: 2px solid red; }
<input id="foo" type="text"/>
12
Josef Pfleger

アウトラインの代わりに、box-shadowプロパティは、任意のテキストフィールドの非常にスムーズで素晴らしい効果を実現します。

field {
    border-color: #dbdbdb;
}

field:focus { /* When you click on the field... */
    border-color: #6EA2DE;
    box-shadow: 0px 0px 10px #6EA2DE;
}

これが JSFiddle Demo 私はかつて、トランジションフェード効果を使用して上記のコードを表示するように作成しました。

18
beakr

アウトラインプロパティ

http://www.w3schools.com/css/pr_outline.asp

テキストボックスをクリックしたときに表示する場合：

input:focus { outline: /* whatever */ }

IE7は：focusセレクターをサポートしていませんが、jQueryを使用できます。

$("input").focus(function () {
     $(this).css('outline','yellow solid thin');
});
3
Tyler Rash

明らかに、アウトラインはIE7でサポートされておらず、サポートされていたとしても、「光る」とは思えません。これは、カスタムの背景画像などを使用して行う必要があります。ここにそれを行う例があります：

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html

ところで：あなたは「ボーダーカラー」と言います。境界線は輪郭ではありません。あなたはただ使うことができます：

<input onfocus="this.style.border='2px solid yellow'">

CSS：focus疑似クラスでそれを行うことができますが、IE6/7がそれをサポートしていない可能性があります。

2
SpliFF

コード-

input[type=text], 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;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

input[type=text]: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);
}

デモ- http://www.labshab.com/submit-guest-posts/

1
mohit

bootstrapを使用している場合は、

class="form-control"
0
सत्यमेव जयते