web-dev-qa-db-fra.com

Style des champs de mot de passe en CSS

Je rencontre un problème mineur avec les polices dans ma feuille de style.

C'est mon CSS:

body
{
  ...
  font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}

#wrapper_page
{
  ...
  font-size: 1.2em;
}

input, select, textarea
{
  ...
  font: bold 100% "Lucida Sans Unicode",sans-serif;
}

Et voici le résultat:

browser password fields

Je pense qu’il existe un réglage css interne, quelque part, sur les kits Web qui modifient la forme des points de mot de passe. Comment puis-je m'en débarrasser et avoir le même style sur tous les navigateurs?

Merci!

EDIT: Je viens de trouver quelque chose de curieux: par défaut, les navigateurs webkit appliquent ce CSS aux champs de mot de passe:

input[type="password"]
{
  -webkit-text-security: disc;
}

Et c'est ce qui remplace le middot classique. J'ai essayé de le définir en cercle ou aucun, mais je ne peux pas obtenir quelque chose de similaire à ce que montrent les autres navigateurs.

EDIT: J'ai trouvé une solution. Si vous utilisez la police "Lucida Sans Unicode" pour votre site Web, c'est le problème! La seule police qui émule correctement les gros points du champ de mot de passe des autres navigateurs est Verdana, mélangée avec un peu d'espacement des lettres. Donc, pour les deux Opera et Webkit, utilisez le code suivant pour le résoudre:

.opera input[type="password"],
.webkit input[type="password"]
{
  font: large Verdana,sans-serif;
  letter-spacing: 1px;
 }
cssformsinputfontsstylesheet
40
Tommaso Belluzzo

Le mieux que je puisse trouver est de définir input[type="password"] {font:small-caption;font-size:16px}

Démo: http://jsfiddle.net/x5CCf/

28
Sotiris

Le problème est que (à compter de 2016), Firefox et Internet Explorer utilisent pour le champ mot de passe le caractère "Cercle noir" (●), qui utilise le point de code Unicode 25CF, mais Chrome utilise le caractère "Bullet" (•), qui utilise le point de code Unicode 2022.

Comme vous pouvez le constater, même dans la police StackOverflow, les deux caractères ont des tailles différentes.

La police que vous utilisez, "Lucida Sans Unicode", présente une disparité encore plus grande entre les tailles de ces deux caractères, ce qui vous permet de constater la différence.

La solution simple consiste à utiliser une police dans laquelle les deux caractères ont des tailles similaires.

Le correctif pourrait donc consister à utiliser une police par défaut du navigateur, ce qui devrait rendre les caractères du champ de mot de passe parfaitement:

input[type="password"] {
    font-family: caption;
}
6
Timo Türschmann

Lorsque j'ai besoin de créer des points similaires en entrée [mot de passe], j'utilise une police personnalisée en base64 (avec 2 glyphes, voir ci-dessus, 25CF et 2022)

styles SCSS

@font-face {
  font-family: 'pass';
  font-style: normal;
  font-weight: 400;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format('woff');
}

input.password {
  font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif ;
  font-size: 18px;
  &::-webkit-input-placeholder {
    transform: scale(0.77);
    transform-Origin: 0 50%;
  }
  &::-moz-placeholder {
    font-size: 14px;
    opacity: 1;
  }
  &:-ms-input-placeholder {
    font-size: 14px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
  }

Après cela, j'ai obtenu une entrée d'affichage identique [mot de passe]

4
Alexander

J'ai trouvé que je pouvais améliorer un peu la situation avec CSS dédié à Webkit (Safari, Chrome). Cependant, je devais définir une largeur et une hauteur fixes sur le champ car le changement de police redimensionnerait le champ.

@media screen and (-webkit-min-device-pixel-ratio:0){ /* START WEBKIT */
  INPUT[type="password"]{
  font-family:Verdana,sans-serif;
  height:28px;
  font-size:19px;
  width:223px;
  padding:5px;
  }
} /* END WEBKIT */
3
Volomike