Очень хорошо. Во-первых, если вы хотите, чтобы это применялось только к полям ввода текста, вам нужно ограничить селектор: input [type = text]: focus, input [type = password], input [type = textarea].
Майкл Кеннеди
1
@MichaelKennedy В реальных приложениях этого будет недостаточно. Стандартный подход будет классы, например .glowing-input { … }.
Шиме Видас
Конечно, моя точка зрения заключалась в том, чтобы применять радиокнопки, кнопки отправки и т. Д., Которые могут быть не нужны
input {border:1px solid #4195fc;/* some kind of blue border *//* other CSS styles *//* round the corners */-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;/* make it glow! */-webkit-box-shadow:0px0px4px#4195fc;-moz-box-shadow:0px0px4px#4195fc;box-shadow:0px0px4px#4195fc;/* some variation of blue for the shadow */}
Ну и что? Принятый ответ не облегчает задачу. оригинальный вопрос (и мой ответ) был опубликован в 2011 году, и я почти уверен, что светящиеся границы Твиттера тоже не ослабевали. кроме того, вопрос не в том, чтобы облегчить вывод, а в том, как сделать границу светящейся закругленными углами, на что я ответил. Я не думаю, что вы должны голосовать против меня только потому, что нет никакого легкого выхода
SLaks бьют по голове, но вы можете просмотреть изменения для входных данных в CSS3 в целом. Закругленные углы и box-shadow - это новые функции в CSS3, которые позволят вам сделать именно то, что вы ищете. Одна из моих любимых ссылок на CSS3 / HTML5 - http://diveintohtml5.ep.io/ .
input {/* round the corners */border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}input:focus {outline:none;border:1px solid #4195fc;/* create a BIG glow */box-shadow:0px0px14px#4195fc;-moz-box-shadow:0px0px14px#4195fc;-webkit-box-shadow:0px0px14px#4195fc;}
Ниже приведен код, который использует Bootstrap. Цвета немного разные, но концепция та же. Это если вы используете LESS для компиляции CSS:
// Form control focus state//// Generate a customized focus state and for any input with the specified color,// which defaults to the `@input-focus-border` variable.//// We highly encourage you to not customize the default value, but instead use// this to tweak colors on an as-needed basis. This aesthetic change is based on// WebKit's default styles, but applicable to a wider range of browsers. Its// usability and accessibility should be taken into account with any change.//// Example usage: change the default blue border and shadow to white for better// contrast against a dark gray background..form-control-focus(@color:@input-border-focus){@color-rgba: rgba(red(@color), green(@color), blue(@color),.6);&:focus {
border-color:@color;
outline:0;.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");}}
Если вы не используете LESS, то вот скомпилированная версия:
Ответы:
Ну вот:
Демонстрационная версия: http://jsfiddle.net/simevidas/CXUpm/1/show/
(чтобы просмотреть код для демонстрации, удалите «show /» из URL)
источник
transition: box-shadow linear 1s
jsfiddle.net/simevidas/6LyWe/1.glowing-input { … }
.Как насчет чего-то вроде этого ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/
CSS
источник
Используйте обычный синий
border
, среднийborder-radius
и синийbox-shadow
с положением0 0
.источник
SLaks бьют по голове, но вы можете просмотреть изменения для входных данных в CSS3 в целом. Закругленные углы и box-shadow - это новые функции в CSS3, которые позволят вам сделать именно то, что вы ищете. Одна из моих любимых ссылок на CSS3 / HTML5 - http://diveintohtml5.ep.io/ .
источник
Я объединил два предыдущих ответа ( jsfiddle ).
источник
Модифицированная версия с чуть менее светящейся версией.
источник
источник
Ниже приведен код, который использует Bootstrap. Цвета немного разные, но концепция та же. Это если вы используете LESS для компиляции CSS:
Если вы не используете LESS, то вот скомпилированная версия:
источник
Это создаст светящиеся поля ввода и текстовые области:
источник
источник
Вам лучше использовать Twitter Bootstrap, который содержит все эти приятные вещи внутри. Особенно здесь именно то, что вы хотите.
Кроме того, вы можете использовать различные темы, созданные для Twitter Bootstrap с этого сайта
источник