Chrome input type="number" CSS styling [duplicate] Chrome input type="number" CSS styling [duplicate] google-chrome google-chrome

Chrome input type="number" CSS styling [duplicate]


I just ran into this myself. Actually, I was trying to get rid of them, however, the same rules in the the linked SO question still should apply for altering appearance as well. I found the solution in another SO question. Look at the accepted answer, it works like a charm.


I can't seem to find the number input's default arrow styles.Hope this helps.Heres a list of all the styles found in the number input element (found using chromes inspect mode):

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 Rulesuser agent stylesheetinput: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 stylesheetinput, 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 stylesheetinput, 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 elementuser agent stylesheetinput::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {1.  color: darkGray;}Pseudo ::-webkit-media-controls-volume-slider-container elementuser agent stylesheetinput::-webkit-input-speech-button {1.  -webkit-appearance: -webkit-input-speech-button;2.  display: inline-block;}Pseudo ::-webkit-media-controls-current-time-display elementuser agent stylesheetinput::-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 elementuser agent stylesheetinput::-webkit-outer-spin-button {1.  margin: 0px;}user agent stylesheetinput::-webkit-outer-spin-button {1.  -webkit-appearance: outer-spin-button;2.  display: inline-block;3.  margin-left: 2px;4.  -webkit-user-select: none;}