Eingabe eines Eingabetyps = Nummer

78

Ist es möglich, einen Stil im inneren "Aufwärtspfeil" und "Abwärtspfeil" von a <input type="number">in CSS anzuwenden ? Ich möchte den Hintergrund des Aufwärtspfeils in Blau und des Abwärtspfeils in Rot ändern. Irgendwelche Ideen?

innere Pfeile stylen

html css Savrige
quelle
1
Soweit ich weiß, nicht nur mit CSS.
Leeish
2
Mögliches Duplikat der Eingabe
LcSalazar,
1
Sie können es mit Shadow DOM-Selektoren versuchen, diese sind jedoch nicht zuverlässig, da Sie für jeden Browser unterschiedliche benötigen.
RaphaelDDL
Dieser Codepen zeigt +/- anstelle der Pfeile.
Dan Dascalescu

Antworten:

68

UPDATE 17/03/2017

Die ursprüngliche Lösung funktioniert nicht mehr. Die Spinner sind Teil von Shadow Dom. Fürs Erste nur um sich in Chrom zu verstecken:

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
<input type="number" />
Erweitern Sie das Snippet

oder um immer zu zeigen:

input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}
<input type="number" />
Erweitern Sie das Snippet

Sie können Folgendes versuchen, beachten Sie jedoch, dass dies nur für Chrome funktioniert :

Code-Snippet anzeigen

Alex Char
quelle
1
Es gibt auch einige Plugins für diesen Job wie kendo
Alex Char
Ich bemerke, dass Chrom den Drehknopf ausblendet, wenn die Eingabe den Fokus verliert. Ich frage mich, ob es in CSS eine Regel gibt, um das Problem auf dem Bildschirm zu beheben und den Drehknopf immer sichtbar zu machen.
Savrige
Schauen Sie sich die akzeptierte Antwort in diesem Thread an: stackoverflow.com/questions/25194631/… Es hat bei mir funktioniert.
Dan
1
Ich empfehle, dieses Codebeispiel hier anzusehen. Codepen.io/komarovdesign/pen/PPRbgb Es ist eine js + css-Lösung und browserübergreifend kompatibel (Firefox, Chrome, Safari getestet). Für die Schaltflächen können Sie Bilder wie .svg oder png hinzufügen.
guido _nhcol.com.br_
32

Für Mozila

input[type=number] { 
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0; 
}

Für Chrome

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
}
saghar.fadaei
quelle
9

Ich habe die Antwort von @ LcSalazar ein wenig geändert ... sie ist immer noch nicht perfekt, da der Hintergrund der Standardschaltflächen sowohl in Firefox als auch in Chrome und Opera (nicht in Safari getestet) angezeigt wird. Das Klicken auf die Pfeile funktioniert jedoch weiterhin

Anmerkungen:

  • Durch Hinzufügen pointer-events: none;können Sie durch die überlappende Schaltfläche klicken, die Schaltfläche jedoch nicht formatieren, während Sie den Mauszeiger bewegen.
  • Die Pfeile sind in Edge sichtbar, funktionieren jedoch nicht, da Edge keine Pfeile verwendet. Es wird nur ein "x" hinzugefügt, um die Eingabe zu löschen.

.number-wrapper {
  position: relative;
}

.number-wrapper:after,
.number-wrapper:before {
  position: absolute;
  right: 5px;
  width: 1.6em;
  height: .9em;
  font-size: 10px;
  pointer-events: none;
  background: #fff;
}

.number-wrapper:after {
  color: blue;
  content: "\25B2";
  margin-top: 1px;
}

.number-wrapper:before {
  color: red;
  content: "\25BC";
  margin-bottom: 5px;
  bottom: -.5em;
}
<span class='number-wrapper'>
    <input type="number" />
</span>
Erweitern Sie das Snippet

Mottie
quelle
9

Ein wenig anders als die anderen Antworten, mit einem ähnlichen Konzept, aber Divs anstelle von Pseudoklassen:

input {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 50px;
  height: 20px;
  padding: 0px;
  font-size: 14pt;
  border: solid 0.5px #000;
  z-index: 1;
}

.spinner-button {
  position: absolute;
  cursor: default;
  z-index: 2;
  background-color: #ccc;
  width: 14.5px;
  text-align: center;
  margin: 0px;
  pointer-events: none;
  height: 10px;
  line-height: 10px;
}

#inc-button {
  left: 46px;
  top: 10.5px;
}

#dec-button {
  left: 46px;
  top: 20.5px;
}
<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>
Erweitern Sie das Snippet

Richard Yan
quelle
4

Verrückte Idee...

Sie könnten mit einigen Pseudoelementen herumspielen und Aufwärts- / Abwärtspfeile mit Hex-Codes für CSS-Inhalte erstellen. Die einzige Herausforderung besteht darin, die Position des Pfeils zu präzisieren, aber es kann funktionieren:

input[type="number"] {
    height: 100px;
}

.number-wrapper {
    position: relative;
}

.number-wrapper:hover:after {
    content: "\25B2";
    position: absolute;
    color: blue;
    left: 100%;
    margin-left: -17px;
    margin-top: 12%;
    font-size: 11px;
}

.number-wrapper:hover:before {
    content: "\25BC";
    position: absolute;
    color: blue;
    left: 100%;
    bottom: 0;
    margin-left: -17px;
    margin-bottom: -14%;
    font-size: 11px;
}
<span class='number-wrapper'>
    <input type="number" />
</span>
Erweitern Sie das Snippet

LcSalazar
quelle
6
Wirklich gut versuchen Sie @LcSalazar mit einigen Problemen. Es funktioniert nicht, wenn Sie genau auf den Pfeil klicken. Auch wenn Sie die Maus bewegen und den Fokus behalten, wird die Standardeinstellung angezeigt. +1 obwohl :)
Alex Char
4

Ich habe damit auf Mobilgeräten und Tablets zu kämpfen. Meine Lösung bestand darin, die absolutePositionierung auf den Spinnern zu verwenden, also poste ich sie nur, falls es jemand anderem hilft:

<html><head>
    <style>
      body {padding: 10px;margin: 10px}
      input[type=number] {
        /*for absolutely positioning spinners*/
        position: relative; 
        padding: 5px;
        padding-right: 25px;
      }

      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        opacity: 1;
      }

      input[type=number]::-webkit-outer-spin-button, 
      input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: inner-spin-button !important;
        width: 25px;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
      }
    </style>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
  </head>
  <body >
    <input type="number" value="1" step="1" />

  </body></html>
Erweitern Sie das Snippet

JoeP
quelle
2

Der obige Code für Chrom funktioniert einwandfrei. Ich habe versucht, so in Mozila, aber es funktioniert nicht. Ich habe die Lösung dafür gefunden

Für Mozila

input[type=number] { 
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0; 
}

Danke Sanjib

Psanjib
quelle
1

Das CSS zum Ändern der Spinnerpfeile ist stumpf und unzuverlässig über den Browser hinweg.

Die stabilste Option, die ich gefunden habe, besteht darin, ein Bild mit Zeigerereignissen absolut zu positionieren: keine; auf den Spinnern.

In Edge nicht getestet, funktioniert aber in allen anderen Browsern.

Dave Carney
quelle