html5 - should - no autocomplete input
Tipo de entrada de Chrome=estilo CSS "nĂºmero" (2)
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;
}
Esta pregunta ya tiene una respuesta aquí:
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-
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.