Gestalten von Passwortfeldern in CSS

Question

Ich habe ein kleines Problem mit Schriftarten in meinem Stylesheet.

Dies ist mein 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;
}

Und das ist das Ergebnis:

Ich glaube, es gibt irgendwo auf den Webkits eine interne CSS-Einstellung, die die Form der Kennwortpunkte ändert. Wie kann ich sie loswerden und in jedem Browser den gleichen Stil haben?

Danke!

EDIT: Ich habe gerade etwas Merkwürdiges entdeckt: Standardmäßig wenden Webkit-Browser dieses CSS auf Passwortfelder an:

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

Und das ist es, was den klassischen Middot ersetzt. Ich habe versucht, ihn auf "Kreis" oder "keine" einzustellen, aber ich kann keine ähnliche Darstellung wie in anderen Browsern erreichen.

EDIT: ICH HABE EINE LÖSUNG GEFUNDEN. Wenn Sie die Schriftart "Lucida Sans Unicode" für Ihre Website verwenden, ist das das Problem! Die einzige Schriftart, die die großen Punkte des Passwortfeldes in anderen Browsern korrekt emuliert, ist Verdana, gemischt mit ein wenig Buchstabenabstand. Verwenden Sie also sowohl für Opera als auch für Webkit den folgenden Code, um das Problem zu beheben:

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

Answer 1

Das Beste, was ich finden konnte, ist die Einstellung input[type="password"] {font:small-caption;font-size:16px}

Demo:

input {
  font: small-caption;
  font-size: 16px;
}

<input type="password">

Answer 2

Wenn ich ähnliche Punkte in input[password] erstellen muss, verwende ich eine benutzerdefinierte Schriftart in base64 (mit 2 Glyphen siehe oben 25CF und 2022)

Danach erhielt ich die gleiche Anzeige input[password]

@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[type=password]:not(:placeholder-shown) {
  font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif;
}

<form action="#">
<input type="password" placeholder="Your password" />
<br>
<br>
<input type="password" placeholder="Repean your password" />
</form>

Answer 3

Das Problem ist, dass (ab 2016) Firefox und Internet Explorer für das Passwortfeld das Zeichen "Black Circle" () verwenden, das den Unicode-Codepunkt 25CF Chrome verwendet jedoch das Zeichen "Bullet" (-), das den Unicode-Codepunkt 2022 .

Wie Sie sehen können, haben die beiden Zeichen selbst in der StackOverflow-Schriftart unterschiedliche Größen.

Bei der von Ihnen verwendeten Schriftart "Lucida Sans Unicode" sind die Größenunterschiede zwischen diesen beiden Zeichen noch größer, so dass Sie den Unterschied bemerken.

Die einfache Lösung besteht darin, eine Schriftart zu verwenden, bei der beide Zeichen eine ähnliche Größe haben.

Die Lösung könnte also darin bestehen, eine Standardschriftart des Browsers zu verwenden, die die Zeichen im Kennwortfeld einwandfrei darstellen sollte:

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

Answer 4

Ich habe festgestellt, dass ich die Situation mit CSS für Webkit (Safari, Chrome) ein wenig verbessern konnte. Allerdings musste ich eine feste Breite und Höhe auf das Feld setzen, weil die Schriftart Änderung wird das Feld Größe ändern.

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

Answer 5

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 
0.001dpcm) {    
.chrome {
property: value;
}
.register-password input[type="password"]:not(:placeholder-shown) {
font-family: "pass";
font-size: 30px;
 }
}

@-moz-document url-prefix() {
.register-password input[type="password"]:not(:placeholder-shown) {
font-family: "pass";
font-size: 18px;
 }
}    

Das hat bei mir funktioniert, um die gleiche Größe der Passwortpunkte in der Firefox Developer Edition und in Chrome zu erhalten.