Entrée contractée lors de la mise au point - Chrome

J'ai une entrée simple avec certains styles.Entrée contractée lors de la mise au point - Chrome

input { 
 
    \t display: block; 
 
    \t width: 100%; 
 
    \t padding: 4px 6px; 
 
    \t -moz-box-sizing: border-box; 
 
    \t -webkit-box-sizing: border-box; 
 
    \t -ms-box-sizing: border-box; 
 
    \t box-sizing: border-box; 
 
    }

<input type="email" id="email" name="email" placeholder="Email">

Le code fonctionne très bien avec Firefox. Cependant, dans Chrome, lorsque l'entrée est concentrée, elle se réduit un peu (plus petit que dans l'état normal). J'ai essayé d'appliquer le dimensionnement de la bordure sur cette entrée, mais le problème persiste. Comment devrais-je réparer cela?

Source

2015-02-26 DucCuong

Si vous faites une entrée: focus {outline: 0;} va se focaliser et ensuite vous pouvez le manipuler à partir de là ....... –

Utilisez-vous la classe par défaut de twitter-bootstrap? ? Vous pouvez utiliser class = form-group pour envelopper votre formulaire et class = form-control pour votre zone de saisie. Cela devrait être capable de rendre presque exactement dans tous les navigateurs. –

@JosephCC J'utilise bootstrap mais je ne veux pas envelopper mon entrée en tant que contrôle de forme car je veux le styliser différemment. J'ai essayé d'appliquer 'input: focus {outline: 0; } 'et ça ne marche pas – DucCuong

Utilisez la pseudo classe :focus.

input:focus { 
    outline: none; 
}

Comme ceci: JSFiddle.

Cela fonctionne bien pour moi dans Chrome et Firefox. Aussi vaut la peine d'envisager d'utiliser normalize.css (ou quelque chose de similaire), pour éviter (ou corriger) les paramètres par défaut des navigateurs css attriibute.

Source

2015-02-26 10:46:10 DNReNTi

Entrée contractée lors de la mise au point - Chrome

Répondre

Questions connexes