web-dev-qa-db-fra.com

Copier le style de contour de l'entrée par défaut de Chrome

Comment puis-je définir le style de contour de l'entrée Chrome par défaut (sur le focus, le orange) pour qu'il soit identique dans tous les navigateurs? Le style Chrome semble être textarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px}, mais cela ne fonctionne pas (il n'y a pas de auto pour outline-style pour les autres navigateurs).

cssgoogle-chrome
23
geehertush01

Style de contour Chrome par défaut:

outline-color: rgb(77, 144, 254); // #4D90FE
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;

convertir à cela 

 input:focus {
     outline:none; 
     border:1px solid #4D90FE;
     -webkit-box-shadow: 0px 0px 5px  #4D90FE;
     box-shadow: 0px 0px 5px  #4D90FE;
 }
19
Андрій Хмара

Je ne sais pas si ma solution est assez bonne pour vous, mais jusqu'à présent, je ne connais pas d'autre moyen ... Je le fais comme ça:

textarea:focus
{
    outline:none; /*or outline-color:#FFFFFF; if the first doesn't work*/
    border:1px solid #48A521;
    -webkit-box-shadow: 0px 0px 4px 0px #48A521;
    box-shadow: 0px 0px 4px 0px #48A521;
}
9
Jo Smo

Tu ne peux pas vraiment. 

Chrome utilise le style de contour "auto" (peu importe ce que cela signifie) et cela ne correspond pas aux spécifications CSS3.

Votre meilleure option est de créer votre propre style de surbrillance et (au moins) d’écraser le style de contour. Ainsi, tous les navigateurs auront le même élément de focus pour votre page. 

Copier le style chrome est très difficile à faire. Puisque css par défaut ne prend pas en charge les contours ressemblant à des ombres, seuls les styles solide, en pointillé, etc. sont pris en charge. Vous devrez l'imiter à l'aide de box-shadow. Cependant, pour une raison étrange, cela fera apparaître la bordure de la zone de saisie (style encart), ce qui vous obligera à définir la bordure de la zone de saisie.

Vous pouvez faire quelque chose comme ça par exemple:

input:focus {
  box-shadow: 0px 0px 8px blue;
  outline-style: none;
}
input {
  border: 1px solid #999;
}

http://jsfiddle.net/dstibbe/2wr0pge2/2/

0
dstibbe

Avec Chrome 60, le contour est maintenant bleu. 

Le style automatique du contour crée un contour d'un pixel, avec les coins "cochés". 

Ceci peut être réalisé en utilisant les règles :: before et :: after comme ceci:

DIV.someclass--focus {
    outline:none; 
    border: 1px solid #86A8DF !important;
}
DIV.someclass--focus::before {
    position:absolute;
    margin-top:-2px;
    margin-bottom: -2px;
    margin-left: -1px;
    margin-right: -1px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    content: ' ';
    border-left: none;
    border-right: none;
    border-top: 1px solid #A6C8FF;
    border-bottom: 1px solid #A6C8FF;
}
DIV.someclass--focus::after {
    position:absolute;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: -2px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    content: ' ';
    border-left: 1px solid #A6C8FF;
    border-right: 1px solid #A6C8FF;
    border-top: none;
    border-bottom: none;
}

La première règle change la couleur de la bordure.

La deuxième règle fournit une bordure supérieure et inférieure qui commence un pixel à partir de la gauche et se termine à un pixel de la droite.

La règle des opérateurs fournit des bordures gauche et droite qui commencent par le bas et se terminent par un pixel.

CAVEAT: l'élément contenant doit être explicitement "position: relative" pour que le :: before/:: after positionnement absolu fonctionne.

Le nom de classe "someclass-focus" n'a pas de sens ... il doit simplement être appliqué/supprimé chaque fois que vous souhaitez que le contour de pseudo focus apparaisse/disparaisse.

0
user2845090