Metin giriş alanları için CSS seçici?


Yanıtlar:


674
input[type=text]

veya formlardaki metin girişleriyle kısıtlamak için

form input[type=text]

veya belirli bir formla daha fazla kısıtlamak için, myForm

#myForm input[type=text]

Uyarı: Bu IE6 tarafından desteklenmez, bu nedenle IE6 için geliştirmek istiyorsanız IE7.js'yi kullanın (Yi Jiang'ın önerdiği gibi) veya tüm metin girişlerinize sınıf eklemeye başlayın.

Referans: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors


Çünkü o belirtilen varsayılan özellik değerleri özelliğini her zaman seçicileri ile seçilebilir olmayabilir, bir metin girişi hale edildikleri biçimlendirme diğer servis taleplerini karşılamak üzere deneyebilirsiniz:

input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'

Yine de, tür tanımlandığında durumdan ayrılır, ancak geçersiz bir değere sahiptir ve yine de type = "text" öğesine geri döner. Kullanabileceğimizi karşılamak için bilinen diğer türlerden olmayan tüm girdileri seçin

input:not([type=button]):not([type=password]):not([type=submit])...

Ancak bu seçici oldukça saçma olurdu ve HTML'ye eklenen yeni özelliklerle olası türlerin listesi de büyüyor.

Uyarı: :notsözde sınıf yalnızca IE9 ile başlayarak desteklenir.


41
Bazı öğretici web sitesi yerine gerçek standardı belirtmek için +1
Šime Vidas

7
Teşekkür ederim. İnsanların Google'da veya w3schools'ta ortaya çıkan ilk şeyden alıntı yaptığını fark ettim.
Alin Purcaru

Evet, bu biraz sinir bozucu
Šime Vidas

IE6'da çalışır mı? Çapraz tarayıcı çözümü için ben html geliştirme için berbat sınıfları (.input-text, .input-send, vb) eklemeyi tercih eğilimindedir, ancak css ve javascript biraz daha güzel yapar.
zzzzBov

1
@MubasharAhmad Cevabımı güncelledim ve gördüğünüz gibi yalnızca IE9'un üzerindeki tarayıcıları hedefliyorsanız bir geçici çözüm var.
Alin Purcaru


14

Genellikle ana stil sayfamda seçiciler kullanıyorum, sonra tüm girdi türlerine bir sınıf ekleyen bir ie6 belirli .js (jquery) dosyası yapıyorum. Misal:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

Ve sonra sadece sınıfları kullanarak ie6 belirli stil sayfasında stilleri çoğaltın. Bu şekilde, gerçek işaretleme biraz daha temiz olur.


Bu çok yavaş
Hidayt Rahman

8

:textMetin içeren tüm girişleri seçmek için Seçici'yi kullanabilirsiniz

Çalışma keman

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:textbir jQuery uzantısıdır ve CSS belirtiminin bir parçası değildir, sorgular: metin yerel DOM querySelectorAll () yöntemi tarafından sağlanan performans artışından yararlanamaz. Modern tarayıcılarda daha iyi performans için [type="text"]kullanın. Bu işe yarayacak IE6+.

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

CSS

[type=text] // or input[type=text] 
{
    background: green;
}

2

Bir tablo satır alanında giriş türü metin alanı vardı. Kodla hedefliyorum

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}

0

@Amir'in yukarıda yayınladığı gibi, günümüzde en iyi yol - çapraz tarayıcı ve IE6'nın arkasında bırakmak - kullanmak

[type=text] {}

Kimse (alt CSS özgüllük söz neden olan bu önemli ?) Şimdiye kadar, [type=text] özellikleri 0,0,1,0 yerine 0,0,1,1 ile input[type=text].

Performans açısından artık olumsuz bir etkisi yok.

düşürülmüş seçici özgüllük ile piyasaya sürülen v4.0.0'ı normalleştirin .


0

Özellik seçici ile CSS'deki giriş türü metnini hedefliyoruz

input[type=text] {
background:gold;
font-size:15px;
 }

0

Giriş [tip = metin]

Bu, bir web sayfasındaki tüm giriş türü metnini seçecektir.


-1

Nitelik seçiciler genellikle girişler için kullanılır. Bu özellik seçici listesidir:

[title] title özelliğine sahip tüm öğeler seçilir.

[title = banana] title özelliğinin 'banana' değerine sahip tüm öğeler.

[title ~ = banana] Başlık niteliğinin değerinde 'muz' içeren tüm öğeler.

[title | = banana] title niteliğinin değeri 'banana' ile başlayan tüm öğeler.

[title ^ = banana] title niteliğinin değeri olan tüm öğeler 'banana' ile başlar.

[title $ = banana] title niteliğinin değeri 'banana' ile biten tüm öğeler.

[title * = muz] title niteliğinin değeri olan tüm öğeler 'banana' alt dizesini içerir.

Referans: https://kolosek.com/css-selectors/

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.