Есть ли способ добавить свечение вокруг div? Посмотрите на вход в твиттер и как синее свечение вокруг окна ввода, это можно сделать для div?светится вокруг div с границей и цветом
ответ
Вот полный код стилизации DIV так же, как на входе щебет входа в систему. Стилями для синей границы являются стили box-shadow
и border
для селектора div[contenteditable]:focus
. Live demo here (click).
Markup:
<div contenteditable="true">Username or email</div>
CSS:
div[contenteditable]:focus {
border: 1px solid rgb(86, 180, 239);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}
div[contenteditable] {
width: 97%;
max-width: 280px;
margin-right: 10px;
font-family: Arial,sans-serif;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
display: inline-block;
padding: 4px;
margin: 0;
outline: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
line-height: 20px;
}
CSS3 может сделать
-webkit-box-shadow:0 0 20px blue;
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;
Работа JSFiddle.
не отображает его – DemCodeLines
А, ладно. Ну ... позвольте мне посмотреть, смогу ли я установить JSFiddle для вас. Меня устраивает. –
Какой браузер ему не показывает? Вот пример. http://jsfiddle.net/ryancowles/zs7XN/ – Ryan
Также вы столкнетесь с некоторыми проблемами с Internet Explorer при решении этой проблемы. IE-9 Как всегда поддерживает бокс-тень, но предыдущие версии не, Проверьте это here за то, что работает во всех версиях IE
Как было показано выше, использование CSS: focus
, border
и box-shadow
.
При использовании IE убедитесь, что указан <doctype>
.
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
- 1. div с цветом фона, полупрозрачность и граница с невидимой границей?
- 2. Как сделать фон DIV сплошным цветом, с img как границей?
- 3. Ошибка бутстрапа с закругленной границей вокруг столбцов
- 4. Создание треугольника DIV с границей
- 5. Заполните div с волнистой границей SVG path
- 6. CSS Скошенные края с внешней границей вокруг краев
- 7. Нужно очертить круг с различным цветом вокруг местоположения пользователя
- 8. установить расстояние между div и границей браузера?
- 9. Div с наклонной границей с помощью CSS3?
- 10. Надетый снова с коробкой в коробке, на этот раз с полным цветом и границей
- 11. Полноразмерный div с цветом фона
- 12. как создать resposnsive ромбовидный div с иконами и границей?
- 13. Сделать div частичным цветом
- 14. Четыре div (25%) в строке с границей
- 15. Площадь div с границей. Показывать только углы
- 16. прокручиваемый div с границей HTML CSS
- 17. Как сделать SVG «линия» с границей вокруг нее?
- 18. Объект GLSL светится
- 19. Three.js - сфера, которая светится
- 20. Позиционирование Div меняется с границей и без нее
- 21. align img, span и div с нижней границей
- 22. Странная проблема с границей и границей слева/справа
- 23. Несколько границ вокруг div с прозрачным слоем
- 24. Проблема с границей CSS с верхней и нижней границей
- 25. Проблемы с границей в хроме
- 26. пространство вокруг div с фоном
- 27. Wrap div вокруг скрытого div
- 28. перекрывая границы родительского DIV с границей диапазона детской
- 29. Небольшой промежуток между фоном-цветом div и фоном-цветом div: после
- 30. Поле ввода светится в Firefox без фокуса
возможно дубликат [Текст поля "сияющего" эффект, как Twitter и Tumblr страницы входа?] (HTTP://stackoverflow.com/questions/9455460/text-field-glowing-effect-like-twitter-and-tumblr-login-pages) – thirtydot