Comment puis-je ajouter une bordure lumineuse sur une zone de texte comme Twitter?

Question

sur Twitter c'est normal

ce qui est lueur vol stationnaire

est-il un plugin jquery ou un code ou un effet css peut faire

Answer 1

Avez-vous essayé l'événement .focus? http://api.jquery.com/focus/ Vous pouvez faire quelque chose comme:

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

Habituellement, il est préférable d'utiliser des classes pour le faire (méthodes .addClass() et .removeClass()), mais l'exemple est de montrer que l'idée. :)

Je ne sais pas s'il y a un moyen de le faire par CSS, mais par jquery est difficile d'apparaître des comportements différents d'un navigateur à l'autre. J'ai fait quelques tests sur le site de twitter, donc il a trouvé ces propriétés utilisées dans chrome et firefox. Si vous ne voulez pas la lueur les mettre comme ceci:

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

Dans d'autres navigateurs, il y aura plus de propriétés à définir, parce que la première est que pour Firefox et l'autre sont pour les navigateurs basés webkit comme le chrome. Et .unbind ('focus flou') parce que twitter les utilise pour s'assurer que tous les navigateurs voient les pages correctement.

Un code comme ceci:

$(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'); 
    }); 
}); 

J'espère que cela vous aide! ^^

Answer 2

Il est juste CSS:

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

Ne fonctionne pas encore dans IE, et pour FireFox vous devez utiliser le préfixe fournisseur: -moz-border-radius

Answer 3

En utilisant Firebug .. Cela semble être appliqué à la boîte lorsqu'elle est mise au point:

.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; 
} 

je Firefox, le CSS variera probablement dans d'autres navigateurs ..