Chrome тип ввода = «число» CSS стиль

Question

У меня есть следующий входной тип = «число»:

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

В Chrome только вы можете увидеть 2 стрелки, которые увеличивают или уменьшают значение. Есть ли способ стилизовать эти элементы управления. Что-то вроде:

#myid::-webkit- 

Answer 1

Я просто побежал в это сам. На самом деле, я пытался избавиться от них, однако, те же правила в связанном SO-вопросе все равно должны применяться и для изменения внешнего вида. Я нашел решение в другом SO question. Посмотрите на принятый ответ, он работает как шарм.

Answer 2

Кажется, я не вижу стили стрелок по умолчанию для ввода номера. Надеюсь, это поможет. Heres список всех стилей, найденных во входной номер элемента (найденный с помощью chromes режима инспектировать):

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