Bonjour les gens,
 
Je demande votre aide car je suis sur un soucis auquel je ne connais ni la raison, ni la solution.
Je suis en train de reproduire le "Search Cool Effect" de Kushagra Agarwal (http://cssdeck.com/labs/super-cool-search-input-using-css3-and-js),
évidemment je le modifie à ma sauce.
Il s'agit d'un champs Recherche où l'on clique sur la loupe qui affiche alors l'input de recherche, puis on clique enfin sur la loupe pour lancer la recherche. (voir lien plus haut de l'auteur)
 
Ce que je voudrais, c'est qu'au lieu d'avoir un background qui change lors du hover, ce soit directement la loupe qui change de couleur (la loupe est directement créé dans le CSS).
J'arrive à le faire sans soucis (line 30 du CSS via le lien plus bas) mais le problème c'est au niveau du rendu.
Quand on hover la loupe avec la souris, que ce soit sur FF ou Chrome, la loupe change bien de couleur mais a un rendu assez crade, comme si elle avait une fine bordure blanche.
Le truc c'est que une fois qu'on clique sur la loupe pour afficher l'input et qu'on hover la loupe, le rendu est niquel et la loupe est dans un beau bleu.
 
Vous pouvez voir le code et agir dessus via ce lien :
 
http://cssdeck.com/labs/bb0hul8a
 
Du coup, pourquoi un tel rendu se produit ?    Surtout que le code qui hover la loupe est le même qui agit aussi sur l'hover de la loupe une fois l'input affiché ?
 
Merci d'avance  

Salut, je viens de faire plusieurs essai, il y a en effet un contour qui donne l'impression que ce n'est pas net, c'est encore plus flagrant avec le zoom.
 
Je n'ai pas résolu le problème, mais j'ai trouvé la source du léger contour.
 
En effet, si tu remplace le blanc de ton cercle de base (composé par le border de 2px) par du rouge.
 
/* Création de la loupe */
form .icon:after, form .submit:after  { content: ''; position: absolute; width: 8px; height: 8px; border: 2px solid red; border-radius: 50%; left: 10px; top: 9px; }
 
Le contour blanc devient un contour rouge, je n'ai pas pris le temps de le faire, mais tu devrai supprimer la bordure de base et créer la nouvelle à la place, ainsi tu évite la superposition des couches, qui visiblement avec le hover rend la couche supérieur légèrement plus fine que celle qu'elle recouvre

Merci pour ta réponse
 
Bah justement, le truc c'est que la bordure de base est remplacée lors de la condition du hover, ce n'est pas une superposition de couches.
Comment tu pensais faire pour enlever la couche primaire dans ce cas?

Voici un essai avec un agrandissement de la loupe afin de mieux observer le comportement, ainsi que l'ajout du contour volontairement exagéré sur le label en css, le reste du code est inchangé.
 
http://cssdeck.com/labs/rzipmjh49v
 
Comme tu peux le voir, on voit clairement que la couche inférieur est toujours présente.
 
Par contre, si tu tu supprime le label de ton code html, il n'y plus ce "contour".
 
Je te laisse faire l'essai sur mon essai ou sur ton propre code, tu devrai le constater facilement.
 
Ce n'est toujours pas une solution mais imo c'est à ce niveau qu'il faut creuser.

Ahh super ! On (toi et moi) a résolu le soucis    
 
J'ai fait des tests et effectivement, c'est le label .submit qui pose problème, qui semble être toujours présent derrière,
sachant que même un display:none ou un opacity:0 dans son champs de css ne changeait rien.
 
Du coup, pour soigner le mal, il faut utiliser le mal !
J'ai rajouté dans le JS un fadeOut('1') sur le label .submit à l'entrée de la page.
Et ça marche ! Pour le coup, le label a vraiment disparu.
Évidemment, il ne faut pas oublier de le remettre quand on clique dessus, donc un fadeIn('1') dans la fonction click et voilà.
 
Par contre, je ne sais toujours pas pourquoi un display:none ou un opacity:0 restait inactif sur le label...
 
Merci à toi  
 
Edit: Tu peux voir le tout ici :
http://cssdeck.com/labs/bb0hul8a

Hehe, pas de soucis, je traîne rarement sur cette partie du forum mais ton pseudo bug m'a interpellé