2011-01-12 6 views
15

aşağıdaki input type = "sayı" olması: Chrome'daKrom input type = "sayı" CSS stil

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

yalnızca değeri artırmak veya azaltmak 2 okları görebilirsiniz. Bu kontrolleri şekillendirmenin bir yolu var mı? Şunlar gibi:

#myid::-webkit- 
+1

Bu, belirli bir web sayfası ile yaptığınız gibi giriş alanlarınızı şekillendirmek için css kullanın chss işlevini kullanın. –

+2

@ArtWorkAD, kromun artmasıyla krom özelliğidir, Chrome'un giriş türü = "sayı" HTML5 desteği tarafından azaltma düğmeleri oluşturulur – Mircea

+0

Başarılı oldun mu? Boyutlarını arttırmayı başaramıyorum ... –

cevap

14

. Aslında, , ancak'dan kurtulmaya çalışıyordum, bağlantılı SO sorusundaki aynı kurallar hala görünüşü değiştirmek için de geçerli olmalıdır. Çözümü başka bir SO question'da buldum. Kabul edilen cevaba bakın, bir çekicilik gibi çalışır.

+0

Ayrıca, bu soruya şu soruları da göz atın: http://stackoverflow.com/questions/21266888/styling-html5-number-input-spin-box-in- krom) – luckydonald

3

Sayı girişinin varsayılan ok stillerini bulamıyorum. Bu yardımcı olur umarım. numara giriş elemanı bulunan tüm stilleri İşte listesi (kromlar modunu denetlemek kullanarak bulundu): Kendimi bu koştu

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