CSS для нечеткого контура вокруг элементов ввода - PullRequest
Новая
       13

CSS для нечеткого контура вокруг элементов ввода

5 голосов
/ 14 марта 2011

Возможные стили контура, о которых я знаю, показаны ниже.

  • пунктир
  • пунктирная
  • твердый
  • двойной
  • паз
  • Хребет
  • вставка
  • боковик

Ни один из них не помещает контур вокруг элемента ввода, как показано ниже: image
С помощью какого стиля CSS кто-то может стилизовать элемент ввода, как показано выше?

Ответы [ 3 ]

4 голосов
/ 14 марта 2011

похоже на поведение браузера по умолчанию, но вы можете подделать его с помощью css3 box-shadow

http://jsfiddle.net/meo/BndwU/

или с вашими цветами: http://jsfiddle.net/meo/BndwU/1/

или с бонусной анимацией фокуса: http://jsfiddle.net/meo/BndwU/2/

3 голосов
/ 14 марта 2011

Это будет работать только в современных браузерах, которые принимают свойства CSS3, такие как box-shadow: 

input[type="text"] {
    background:white;
    border:1px solid #ffcc00;
    box-shadow:0 0 3px #ffcc00;
    -moz-box-shadow:0 0 3px #ffcc00;
    -webkit-box-shadow:0 0 3px #ffcc00;
}

См. Пример →

0 голосов
/ 22 сентября 2011

Используя новый CSS 3 box-shadow, вы можете поместить градиентную рамку вокруг поля ввода. Сначала оберните его в span с новым классом, который содержит что-то вроде: 

.coolio {
  box-shadow:rgba(0,0,0,0.5) 0px 0px 24px; 
}

Вот рабочий пример: Демо-схема Gradient Shadow Outline

...