it-swarm.com.de

Gestalten von Passwortfeldern in CSS

Ich habe ein kleines Problem mit Schriftarten in meinem Stylesheet.

Das 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:

browser password fields

Ich denke, es gibt irgendwo eine interne CSS-Einstellung für Webkits, die die Form der Kennwortpunkte ändern. Wie kann ich es loswerden und auf jedem Browser den gleichen Stil haben?

Vielen Dank!

BEARBEITEN: Ich habe gerade etwas Merkwürdiges gefunden: Standardmäßig wenden Webkit-Browser dieses CSS auf Kennwortfelder an:

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

Und genau das ersetzt den klassischen Middot. Ich habe versucht, einen Kreis oder keinen einzurichten, aber ich kann nichts Ähnliches wie in anderen Browsern anzeigen.

EDIT: Ich habe eine Lösung gefunden. Wenn Sie die Schriftart "Lucida Sans Unicode" für Ihre Website verwenden, ist dies das Problem! Die einzige Schriftart, die die großen Punkte anderer Browser des Passwortfelds korrekt emuliert, ist Verdana, gemischt mit ein wenig Buchstabenabstand. Verwenden Sie daher für Opera und 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;
 }
40

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

Demo: http://jsfiddle.net/x5CCf/

28
Sotiris

Das Problem ist, dass Firefox und Internet Explorer (ab 2016) für das Kennwortfeld das Zeichen "Schwarzer Kreis" (●) verwenden, das den Unicode-Codepunkt 25CF Verwendet, aber Chrome verwendet das Zeichen "Bullet" (•), das den Unicode-Codepunkt 2022 verwendet.

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

Die von Ihnen verwendete Schriftart "Lucida Sans Unicode" weist noch größere Unterschiede zwischen den Größen dieser beiden Zeichen auf, sodass Sie den Unterschied bemerken.

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

Das Update könnte daher darin bestehen, eine Standardschrift des Browsers zu verwenden, die die Zeichen im Passwortfeld gut wiedergibt:

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

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

SCSS-Stile

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

Danach habe ich die identische Displayeingabe [Passwort] bekommen

4
Alexander

Mit CSS für Webkit (Safari, Chrome) konnte ich die Situation ein wenig verbessern. Ich musste jedoch eine feste Breite und Höhe für das Feld festlegen, da durch die Änderung der Schriftart die Größe des Felds geändert wird.

@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