Chrome input type = "number" CSS Styling

Question

Ich habe folgendes input type = "number":

<input id="myid" type="number" name="input" min="0" max="100" step="1" value="0"> 

In Chrome können nur Sie zwei Pfeile sehen, die den Wert erhöhen oder verringern. Gibt es eine Möglichkeit, diese Steuerelemente zu stylen? Etwas wie:

#myid::-webkit- 

Answer 1

ich nur in diese lief mir. Eigentlich habe ich versucht, sie loszuwerden, jedoch, die gleichen Regeln in der verknüpften SO-Frage sollte immer noch für die Änderung des Aussehens gelten. Ich fand die Lösung in einem anderen SO question. Schau dir die akzeptierte Antwort an, es funktioniert wie ein Zauber.

Answer 2

Ich kann nicht scheinen, die Standardpfeilarten der Zahleingabe zu finden. Hoffe, das hilft. Heres eine Liste aller Arten in der Anzahl Eingabeelement gefunden (gefunden Modus chromes inspizieren):

1. -webkit-appearance: textfield; 
2. -webkit-rtl-ordering: logical; 
3. -webkit-user-select: text; 
4. background-color: white; 
5. border-bottom-style: inset; 
6. border-bottom-width: 2px; 
7. border-left-style: inset; 
8. border-left-width: 2px; 
9. border-right-style: inset; 
10. border-right-width: 2px; 
11. border-top-style: inset; 
12. border-top-width: 2px; 
13. color: black; 
14. cursor: auto; 
15. display: inline-block; 
16. font-family: Arial; 
17. font-size: 13px; 
18. font-style: normal; 
19. font-variant: normal; 
20. font-weight: normal; 
21. height: 16px; 
22. letter-spacing: normal; 
23. line-height: normal; 
24. margin-bottom: 2px; 
25. margin-left: 2px; 
26. margin-right: 2px; 
27. margin-top: 2px; 
28. padding-bottom: 1px; 
29. padding-left: 0px; 
30. padding-right: 0px; 
31. padding-top: 1px; 
32. text-align: -webkit-auto; 
33. text-indent: 0px; 
34. text-shadow: none; 
35. text-transform: none; 
36. width: 151px; 
37. word-spacing: 0px; 
Styles 
________________________________________ 

element.style { 
} 
Matched CSS Rules 
user agent stylesheet 
input:not([type]), input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] { 
1. padding: 1px 0px; 
} 
user agent stylesheet 
input, input[type="password"], input[type="search"], isindex { 
1. -webkit-appearance: textfield; 
2. padding: 1px; 
3. background-color: white; 
4. border: 2px inset; 
5. -webkit-rtl-ordering: logical; 
6. -webkit-user-select: text; 
7. cursor: auto; 
} 
user agent stylesheet 
input, textarea, keygen, select, button, isindex, datagrid { 
1. margin: 0em; 
2. font: -webkit-small-control; 
3. color: initial; 
4. letter-spacing: normal; 
5. word-spacing: normal; 
6. line-height: normal; 
7. text-transform: none; 
8. text-indent: 0px; 
9. text-shadow: none; 
10. display: inline-block; 
11. text-align: -webkit-auto; 
} 
Pseudo ::-webkit-input-placeholder element 
user agent stylesheet 
input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
1. color: darkGray; 
} 
Pseudo ::-webkit-media-controls-volume-slider-container element 
user agent stylesheet 
input::-webkit-input-speech-button { 
1. -webkit-appearance: -webkit-input-speech-button; 
2. display: inline-block; 
} 
Pseudo ::-webkit-media-controls-current-time-display element 
user agent stylesheet 
input::-webkit-inner-spin-button { 
1. -webkit-appearance: inner-spin-button; 
2. display: inline-block; 
3. -webkit-user-select: none; 
} 
Pseudo ::-webkit-media-controls-time-remaining-display element 
user agent stylesheet 
input::-webkit-outer-spin-button { 
1. margin: 0px; 
} 
user agent stylesheet 
input::-webkit-outer-spin-button { 
1. -webkit-appearance: outer-spin-button; 
2. display: inline-block; 
3. margin-left: 2px; 
4. -webkit-user-select: none; 
}