html5 - should - no autocomplete input

Tipo de entrada de Chrome=estilo CSS "número"

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Puedo ocultar el cuadro de giro de la entrada del número HTML5? 14 respuestas

Tengo el siguiente tipo de entrada = "número":

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

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

#myid::-webkit-

Answer 1

Parece que no puedo encontrar los estilos de flecha predeterminados de la entrada numérica. Espero que esto ayude. Aquí hay una lista de todos los estilos encontrados en el elemento de entrada de número (encontrado usando el modo de inspección de cromos):

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

Answer 2

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