क्रोम इनपुट प्रकार = "number" सीएसएस स्टाइल

Question

मैं निम्नलिखित इनपुट प्रकार = "number" है:

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

क्रोम में केवल आप 2 तीर को बढ़ाता या मूल्य में कमी देख सकते हैं। क्या उन नियंत्रणों को स्टाइल करने का कोई तरीका है। कुछ ऐसा:

#myid::-webkit- 

Answer 1

मैं सिर्फ अपने आप को इस में भाग गया। असल में, मैं उनसे छुटकारा पाने की कोशिश कर रहा था, हालांकि, लिंक किए गए SO प्रश्न में वही नियम अभी भी उपस्थिति को बदलने के लिए लागू होना चाहिए। मुझे समाधान SO question में मिला। स्वीकृत उत्तर को देखें, यह एक आकर्षण की तरह काम करता है।

Answer 2

मुझे इनपुट इनपुट की डिफ़ॉल्ट तीर शैलियों को नहीं मिल रहा है। उम्मीद है कि यह मदद करता है। यहाँ सभी शैलियों संख्या इनपुट तत्व में पाया की एक सूची (chrome में मोड का निरीक्षण का उपयोग कर पाया):

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