Styling von HTML5-Zahl-Eingang (spin box) in Chrom

Chrome vor kurzem aktualisiert seine Eingabe-element-Stile. Ich mag die number input geben, aber Ihren neuen Stil gibt uns abgerundete Tasten, die nicht ordentlich passen in quadratische Felder eingeben.

Ich habe viele versuche, um diese Eingänge zu ändern, aber Sie gewann ' T budge. Aus der input[type='number'] sich die folgenden Tasten:

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    border-radius: none !important; background: black; color: red;
}

input:-webkit-autofill { background: black; color: red; }

Es scheint, dass Sie möglicherweise nicht in der Lage zu ändern. Hat jemand Erfahrung mit diesem? Ich weiß, es gibt einen Weg, um die Schaltflächen auszublenden. Im Idealfall will ich einfach nur zu entfernen, um die border-radius.

Interessanterweise Polsterung scheint zu funktionieren auf diese Schaltflächen. Ich weiß, dass Sie Zuhören!

InformationsquelleAutor Vael Victus | 2014-01-21
  1. 11

    Gibt es Möglichkeiten, das zu schaffen. Hier ist eine Reine CSS-Lösung:

    http://jsfiddle.net/Volker_E/WwfW9/

    Wie Sie sehen können, die Magie CSS-Eigenschaft/Wert-in deinem Fall ist -webkit-appearance: none;.
    Durch, dass die Spin-Buttons verlieren Ihre Standard-Aussehen. Und du bist in der Lage von Stil und (fast) alle, wie Sie wollen.

    /* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button, 
input[type="number"].mod::-webkit-inner-spin-button {
    -webkit-appearance: none;
    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1em;
    border-left: 1px solid #bbb;
    opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */
}

    Ich habe ein Daten-URI Bild als background (daher die kleine Größe), aber Sie können hinzufügen, was Bild - /CSS-Eigenschaft, die Sie denken, passt Ihre Bedürfnisse.

    Einzige Verbleibende problem ist, dass Sie verlieren ein bisschen auf usability-Seite, da man nicht in der Lage, um den Stil der up-und down-Taste getrennt, und Sie müssen nicht :hover und :focus Stile auf einer einzelnen Taste.

    Das ist einfach nicht möglich mit der aktuellen Implementierung in Chrome.

    Spaß haben!

    Bearbeiten 2015-01-18: Verbesserte Antwort reflektieren änderungen in Chrome >= v39. Dank @dtracers

    • Ich Frage mich, ob sich etwas geändert hat? Wenn ich das jsFiddle, ich sehe den Standard spin-Button – aber die Magie gestylt Feld hat keine Tasten.
    • Mit welchem browser besuchst du jsFiddle mit? Beide spin-Schaltflächen sind nur sichtbar auf :hover und :active in der Geige. In Chrome v36.0.1985.125 m, es ist dasselbe wie vorher.
    • Ich bin mit Chrome 36.0.1985.143. Gibt es irgendeine andere Umwelt-Sache, könnte dies Auswirkungen auf die Anzeige? Es ist ein guter Weg der Untersuchung aber. Ich sah die magischen Knöpfe, auf Safari 7.0.5 (9537.77.4). Vielen Dank für erinnerte mich daran, versuchen Sie einen anderen browser. Trotzdem seltsam, dass ich nicht sehen Magic in Chrome.
    • Ich habe versucht, die Magie auf ein paar andere Computer – und ich sehe die Magie von allen. Ich werde weiter zu untersuchen, was könnte anders sein, über meinen Haupt-Chrome-installation. Vielen Dank für Ihre Hilfe. Und die Magie.
    • Ich sehe nicht, die Tasten in Chrome v39 (ich bin auf einem mac Osx)
    • Scheint, dass Google hat sich verändert die default-styling opacity: 0; und auf :hover, :focus und :active Chrome zeigt die spin buttons. Sie beeinflussen kann, durch ändern der Standard. Meine aktualisierte jsFiddle ändert das standardmäßige Verhalten. jsfiddle.net/Volker_E/WwfW9/296
    • Es ist immer noch nicht arbeiten. s29.postimg.org/ua08smnkz/... dies ist, was es sieht aus wie auf meinem computer
    • Sogar besser als vorher, weil die Knöpfe korrekt ausgerichtet sind, haben eine etwas bessere UX (aufgrund der größeren Interaktion Bereich) und wachsen mit padding/height des input Feld 😉 jsfiddle.net/Volker_E/WwfW9/298 Haben auch aktualisiert Antwort. Vielen Dank für den input!
    • das einzige, was ich succed in ist drehen Sie den inneren Knopf. Wenn es keine innere button kann ich nicht erhöhen, funktioniert es als text-Feld : input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; } input[type="number"]::-webkit-inner-spin-button { transform: rotate(180GRAD); }
    • Nicht ganz sicher, ich Folge dir, das JSFiddle ist noch zu zeigen, alle Funktionen von Außerkraftsetzungen in der neuesten Chrome...

    InformationsquelleAutor Volker E.
Schreibe einen Kommentar