Как я могу добавить светящуюся границу для текстовой области, такой как Twitter? - PullRequest
Новая
       1

Как я могу добавить светящуюся границу для текстовой области, такой как Twitter?

8 голосов
/ 08 декабря 2010

в твиттере это нормально alt text

и это свечение alt text

есть ли плагин JQuery или код или CSS-эффект может сделать это

Ответы [ 3 ]

11 голосов
/ 08 декабря 2010

Это просто CSS: 

textarea:focus {
 border-radius: 0 0 8px rgba(82, 168, 236, 0.5);
 rgba(82, 168, 236, 0.75);
}

Хотя в IE пока не работает, а для FireFox вы должны использовать префикс поставщика: -moz-border-radius

4 голосов
/ 08 декабря 2010

Вы пробовали событие .focus?http://api.jquery.com/focus/ Вы можете сделать что-то вроде: 

$(document).ready(function()
{
    $('twiter_textareas_selector').focus(function()
    {
         $(this).css('border':'blue 3px solid');
    }).blur(function()
    {
         $(this).css('border':'gray 1px solid');
    });
});

Обычно для этого лучше использовать классы (методы .addClass () и .removeClass ()), но пример только дляпокажи идею.:)

Я не знаю, есть ли способ сделать это с помощью css, но с помощью jquery трудно показывать разные варианты поведения от одного навигатора к другому.

Я провел несколько тестов на сайте Twitter, поэтому нашел, что эти свойства используются в Chrome и Firefox.Если вы не хотите, чтобы свечение было установлено следующим образом: 

-moz-box-shadow: 0 0 0 none;
-webkit-transition: border 0 linear;
-webkit-box-shadow: 0 linear;

В других навигаторах будет установлено больше свойств, потому что первый предназначен только для Firefox, а следующий - для браузеров на основе WebKit, таких как Chrome.,И .unbind ('focus blur'), ​​потому что твиттер использует их, чтобы убедиться, что все навигаторы правильно видят страницы.

Код, подобный следующему: 

$(document).ready(function()
{
    $('twiter_textareas_selector').unbind('blur focus'); //try to stop the twitter scripts
    $('twiter_textareas_selector').focus(function()
    {
         $(this).css('moz-box-shadow': '0 0 0 none', '-webkit-transition': 'border 0 linear', '-webkit-box-shadow': '0 linear');
    });
});

Надеюсь, он вам поможет!^^

3 голосов
/ 08 декабря 2010

Использование Firebug .. Это, кажется, применяется к блоку, когда он находится в фокусе: 

.tweet-box textarea:focus .tweet-box input[type=text] {
    -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
    border-color: rgba(82, 168, 236, 0.75) !important;
}

Я использовал Firefox, CSS, вероятно, будет отличаться в других браузерах ..

...