Quelle est la meilleure façon d'atteindre un effet rougeoyant lors de la mise au point sur un champ de texte dans HTML? Peut-on être fait avec CSS seul ou implique-t-il des images? Consultez les pages de connexion pour Twitter et Tumblr pour des exemples de travail.
6 Réponses :
Je l'aborderais en utilisant une ombre de boîte CSS, puis réglez la couleur en bleu plutôt que gris / noir.
Pouvez vous donner un exemple? Je ne suis pas expert CSS!
Quelques autres personnes ont posté des exemples. Mais si vous n'êtes pas expert, vous pouvez avoir une pièce de théâtre avec ce site. C'est génial de créer de petits bits de CSS tels qu'une ombre de la boîte. CSS3Generator.com
Il suffit d'utiliser le oh, et Voici ma combinaison préférée . : focus pseudo-classe, frontière et box-shadow :
CSS: html: Autres façons que j'ai trouvées: Effet rougeoyant autour de la zone de texte tout en activant < / p>
Si vous utilisez des approches entre navigateurs croisés: Ajoutez cette classe au champ en surbrillance en cliquant ou ci-dessus, etc. au besoin. Vous pouvez Obtenez également les cœ points spécifiques là-bas si nécessaire.
Les versions préfixées de Box-Shadow sont obsolètes; Vous ne devriez pas les utiliser.
Je suis en désaccord - je vois toujours de vieilles versions de navigateurs en utilisant nos sites afin qu'ils soient toujours en jeu. Je vous suggérerais de comparer le besoin de vos propres visiteurs plutôt que de prendre les conseils ci-dessus sans vérifier.
Les images ou la boîte CSS Shadow http://css-tricks.com/snippets/css/csss-box- Shadow /
Il suffit d'inspecter l'élément, le CSS est tout là. sur
: focus appliquerbordure: 1px solide # 56b4ef; etbox-ombre: inset 0 1px 3px rgba (0,0,0, 0,05), 0 0 8PX RGBA (82.168.236 ,6);Dupliqué possible de CSS - Focus Login Les champs tout comme Twitter avec Seulement CSS?
@ Pumbaa80, pas de duplicata, cette question est en ce qui concerne les aspects fonctionnels des champs de texte de connexion de Twitter, pas leur apparence