Diseñar campos de contraseña en CSS

Tengo un problema menor con las fonts en mi hoja de estilos.

Este es mi 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; } 

Y este es el resultado:

campos de contraseña del navegador

Creo que hay una configuración de CSS interna, en algún lugar, en los webkits que modifican la forma de los puntos de contraseña. ¿Cómo puedo deshacerme de él y tener el mismo estilo en todos los navegadores?

¡Gracias!

EDITAR: Acabo de encontrar algo curioso: de forma predeterminada, los navegadores web aplican este CSS a los campos de contraseña:

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

Y eso es lo que está reemplazando el middot clásico. He intentado configurarlo para que circule o ninguno, pero no puedo obtener algo similar a lo que muestran otros navegadores.

EDITAR: ENCONTRÉ UNA SOLUCIÓN. Si está utilizando la fuente “Lucida Sans Unicode” para su sitio web, ¡ese es el problema! La única fuente que emula correctamente los puntos grandes del campo de la contraseña de otros navegadores es Verdana, mezclada con un poco de espacio entre letras. Por lo tanto, para Opera y Webkit, use el siguiente código para solucionarlo:

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

Lo mejor que puedo encontrar es establecer la input[type="password"] {font:small-caption;font-size:16px}

Demostración: http://jsfiddle.net/x5CCf/

El problema es que (desde 2016), para el campo de contraseña, Firefox e Internet Explorer usan el carácter “Círculo negro” (●), que usa el punto de código Unicode 25CF , pero Chrome usa el carácter “Viñeta” (•), que usa el punto de código Unicode 2022 .

Como puede ver, incluso en la fuente StackOverflow, los dos caracteres tienen diferentes tamaños.

La fuente que está utilizando, “Lucida Sans Unicode”, tiene una disparidad aún mayor entre los tamaños de estos dos caracteres, lo que le permite notar la diferencia.

La solución simple es usar una fuente en la que ambos caracteres tengan tamaños similares.

Por lo tanto, la solución podría ser utilizar una fuente predeterminada del navegador, lo que debería hacer que los caracteres en el campo de contraseña sean correctos:

 input[type="password"] { font-family: caption; } 

Descubrí que podría mejorar un poco la situación con CSS dedicado a Webkit (Safari, Chrome). Sin embargo, tuve que establecer un ancho y una altura fijos en el campo porque el cambio de fuente cambiará el tamaño del campo.

 @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 */ 

Cuando necesitaba crear puntos similares en la entrada [contraseña] uso una fuente personalizada en base64 (con 2 glifos, mire arriba 25CF y 2022)

Estilos 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; } 

Después de eso, obtuve la entrada de pantalla idéntica [contraseña]