Chrome input type = "número" de estilo CSS

Question

que tiene la siguiente input type = "número":

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

En Chrome solamente se puede ver 2 flechas que aumentan o disminuyen el valor. ¿Hay alguna manera de diseñar esos controles? Algo como:

#myid::-webkit- 

Answer 1

Me acabo de encontrar con esto mismo. En realidad, yo estaba tratando de deshacerme de ellos, sin embargo,, las mismas reglas en la pregunta SO enlazada aún deberían aplicarse para alterar la apariencia también. Encontré la solución en otro SO question. Mira la respuesta aceptada, funciona como un encanto.

Answer 2

Parece que no puedo encontrar los estilos de flecha predeterminados de la entrada numérica. Espero que esto ayude. Aquí está una lista de todos los estilos que se encuentran en el elemento de introducción de números (que se encuentra utilizando el modo de cromos inspeccionan):

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