Текстовое поле "светящийся" эффект, как страницы входа в Twitter и Tumblr?

Question

Как лучше всего добиться эффекта свечения при фокусировке на текстовом поле в HTML?Может ли это быть сделано только с помощью CSS, или это связано с изображениями?Проверьте рабочие страницы для Twitter и Tumblr для рабочих примеров.

Answer 1

Просто используйте псевдокласс :focus, border и box-shadow:

.text:focus {
    border: 1px solid #07c;
    box-shadow: 0 0 10px #07c;
}

Вот демонстрация.

О, и вот моя любимая комбинация .

Answer 2

Я бы подошел к этому, используя тень от поля CSS, а затем установил цвет вместо голубого / черного.

Answer 3

Либо изображения, либо тень CSS Box http://css -tricks.com / сниппеты / CSS / CSS-коробчатого тень /

Answer 4

Если вы используете кросс-браузерные подходы:

.active-field, .selector-for-field:focus {
 -webkit-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
 -khtml-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
 -moz-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
 -o-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
 box-shadow: 0 0 3px rgb(34%, 71%, 94%);
 border:1px solid rgb(34%, 71%, 94%);
}

Затем добавьте этот класс в выделенное поле при щелчке или фокусе и т. Д., Если необходимо.

При необходимости вы также можете получить специальные IE.

Answer 5

используйте focus

образец: http://jsfiddle.net/uday99/kFGmC/23/

Answer 6

CSS:

#form1:focus { border: 2px solid blue; }

HTML:

<input id="form1" type="text"/>

Другие найденные мной способы:

Сделать эффект свечения вокруг текстового поля, пока он активен