= "Sayı" giriş türünde webkit döndürme düğmeleri devre dışı bırakılsın mı?

203

Öncelikle mobil kullanıcılar için, ancak masaüstü bilgisayarlarda da olan bir sitem var.

Mobil Safari'de, <input type="number">yalnızca sayı içermesi gereken giriş alanlarında sayısal klavyeyi görüntülediğinden kullanımı harika çalışır.

Bununla birlikte, Chrome ve Safari'de, sayı girişlerini kullanmak, alanımın sağ tarafında tasarımımda bok gibi görünen döndürme düğmelerini görüntüler. Düğmelere gerçekten ihtiyacım yok, çünkü yine de 6 basamaklı bir sayı gibi bir şey yazmanız gerektiğinde işe yaramazlar.

Bunu -webkit-appearanceveya başka bir CSS hile ile devre dışı bırakmak mümkün mü ? Çok şanssız denedim.

css html webkit

— pojo
kaynak

15

type="text"Başka nedenlerle kullanmayı tercih ediyorsanız ve yalnızca sayısal klavye özelliği için sayıya geçtiyseniz, klavye özelliğini pattern="[0-9]*"almak için kullanabilirsiniz , bu da korumanıza izin verir type="text". Bkz. Stackoverflow.com/questions/6171903/…

— joshuahedlund

114

Aşağıdaki css hem Chrome hem de Firefox için çalışır

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

— Rolwin Crasta
kaynak

8

yukarıdakilerden daha iyi çözüm (daha eksiksiz)

— aqm

-moz-görünüm: metin alanıdır; benim için işe yarayan tek cevaptı. Teşekkürler!

— Nanoripper

283

Bu sorunun cevabının ikinci bir kısmı olduğunu keşfettim.

İlk kısım bana yardımcı oldu, ama yine de girdimin sağında bir boşluk vardı type=number. Girişteki marjı sıfırladım, ama görünüşe göre spinnerdaki marjı da sıfırlamak zorunda kaldım.

Bu sorunu düzeltti:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

— Bob Spryn
kaynak

Muhteşem. Benzer bir sorunum vardı , ancak tamamen yeni sorunlara yol açan biraz farklı bir CSS stratejisi ile ...

— Lukas Eder

1

Sonsuz bir şekilde yukarı ve aşağı kaydırma yapabileceğiniz kaydırma davranışını düzeltmenin bir yolunu bilen var mı? Giriş öğemde min=0.01(ve maxrasgele bir değere) ayarladım , ancak kaydırma tekerleğinin sadece sayfa yukarı ve aşağı gitmesini tercih ederim. AngularJS kullanıyorum ve atm hiçbir şey bulamıyorum.

— JaKXz

2

Bu özel sorun ve bu tür bilgiler için yetkili bir kaynağa bağlanma: css-tricks.com/snippets/css/turn-off-number-input-spinners

— Josh Habdas 13:15

1

açık olmak gerekirse, bu fare kaydırma işlevselliğini kaldırmaz!

— babalu

1

-moz görünümü: Firefox için

— metin alanı

16

Bunun en iyi yolu olup olmadığından emin değilim, ancak bu, Chrome 8.0.552.5 dev'de iplikçilerin kaybolmasını sağlıyor:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

— robertc
kaynak

@JethroLarson Ne üzerinde çalışmıyor? Bunun -webkit-outer-spin-buttonyerine deneyebilirsiniz .

— robertc

bu tür = "tarih" için harika çalıştı: giriş [tür = tarih] :: - webkit-dış-spin-düğmesi {-webkit-görünüm: yok; }

— uglymunky

11

Opera'da iplikçilerin görünmesini engellemek imkansız görünüyor. Geçici bir çözüm olarak, iplikçiler için yer açabilirsiniz. Anlayabildiğim kadarıyla, aşağıdaki CSS sadece Opera'da yeterli dolgu ekliyor:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

— Goulven
kaynak

4

@Knu Gerçekten, ama burada belirtmek gerekir, çünkü cevaptaki kod girdileri Opera ile kullanılamaz hale getirir.

— Goulven

4

@ Goulvench lütfen yapma :) Çok yararlı buldum, başka biri de olabilir.

— frnhr

-2

Spinner'ı aşağıdaki hile ile de gizleyebilirsiniz:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}

— Sébastien Varinois
kaynak