Сделайте светящийся эффект вокруг текстового поля, поместив курсор в текстовое поле. Например: просто поместите курсор внутри текстового поля поиска в наш stackoverflow.com.
Его из-за css, но я не знаю, как его достичь.. Пожалуйста, помогите мне.
Сделайте светящийся эффект вокруг текстового поля, пока он активен
Ответ 1
В то время как эффект, который вы наблюдаете в окне поиска stackoverflow, вероятно, зависит от браузера (например, Google Chrome), есть способ достичь того, что вы хотите использовать с помощью CSS :focus псевдокласс:
#foo:focus { border: 2px solid red; }<input id="foo" type="text"/>Ответ 2
Вместо контуров свойство 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 Я когда-то сам показывал вышеприведенный код с эффектом затухания перехода.
Ответ 3
Свойство структуры
http://www.w3schools.com/css/pr_outline.asp
Если вы хотите, чтобы он отображался при нажатии на текстовое поле:
input:focus { outline: /* whatever */ }
IE7 не поддерживает селектор: focus, но вы можете использовать jQuery:
$("input").focus(function () {
$(this).css('outline','yellow solid thin');
});
Ответ 4
Очевидно, что контур не поддерживается 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 не поддерживает его.
Ответ 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);
}