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

Question

Создайте эффект свечения вокруг текстового поля, поместив курсор внутри текстового поля. Например: просто поместите курсор в текстовое поле поиска в нашем stackoverflow.com.

Это из-за css, но я не знаю, как этого добиться .. Пожалуйста, помогите мне.

Answer 1

Вместо контуров свойство box-shadow обеспечивает очень плавный, приятный эффект любого текстового поля:

field {
    border-color: #dbdbdb;
}

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

Вот демоверсия JSFiddle . Однажды я показал себе код выше с эффектом замирания перехода.

Answer 2

Хотя эффект, который вы наблюдаете в окне поиска stackoverflow, вероятно, зависит от браузера (например, Google Chrome), есть способ достичь желаемого с помощью псевдокласса CSS :focus:

#foo:focus { border: 2px solid red; }

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

Answer 3

Собственность плана

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

Если вы хотите, чтобы он появлялся при нажатии на текстовое поле:

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

IE7 не поддерживает: селектор фокуса, но вы можете использовать jQuery:

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

Answer 4

Очевидно, что контур не поддерживается IE7, и даже если бы я сомневался, он бы "светился". Вы должны сделать это с пользовательским фоновым изображением или чем-то еще. Вот пример того, как это сделать здесь:

http://www.experts -exchange.com / Web_Development / Web_Languages-стандарты / CSS / Q_24084560.html

Кстати: вы говорите "цвет границы". Граница не является контуром. Вы можете просто использовать:

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

Вы можете сделать это с помощью псевдокласса CSS: focus, но есть вероятность, что IE6 / 7 его не поддерживает.

Answer 5

код-

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/