Tüm <input type'text> öğelerine Css sınıfı ekleniyor mu? Javascript/Css?

siteme her metin kutusu için bir CSS sınıfı uygulamak istiyorum:Tüm <input type'text> öğelerine Css sınıfı ekleniyor mu? Javascript/Css?

 <div class="editor-label"> 
      <label for="FoodType">FoodType</label> 
     </div> 
     <div class="editor-field"> 
      <input id="HelpText" name="FoodType" type="text" value="" /> 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p>

Ve Selam düşündüm! Kolay. Hepsini ana sayfada bulabilmek için bir jquery işlevi ekleyeceğim.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('input').addClass('textbox'); 
    } 
</script>

Maalesef bu ayrıca gönder düğmesini de seçecektir. Bir metin türü niteliğine sahip giriş öğelerini nasıl seçebilirim?

Alternativly bu tamamen CSS kullanarak mümkün mü?

Her iki yöntem de mümkün değilse, sanırım sınıfları elime her metin kutusuna eklemem gerekecek mi?

$('input[type=text]').addClass('textbox');

Ve CSS dosyasındaki benzer yapabilir, ama bu eski tarayıcılarda birlikte olmak istiyorum ne kadar geniş bağlı CSS/yüksek sürümünü gerektirir:

kaynak

2010-05-14 4imble

AFAIK bu kadar.

Özellik seçicilerine bkz. here. Not:

"Tarayıcı desteği: CSS3 nitelik seçicileri desteklemez tek tarayıcı IE6 olduğunu Hem IE7 ve IE8, Opera ve Webkit- ve Gecko tabanlı tarayıcılar yüzden stil sayfasında bunları kullanarak yapmak.. kesinlikle güvenli. "

kaynak

2010-05-14 17:01:16 eglasius

Mükemmel, çok teşekkürler. – 4imble

'$ ('input [type = text]')' IE6'da çalışacaktır, çünkü jQuery tarayıcının yerleşik desteğinden ziyade kendi seçici motorunu kullanmaya geri dönecektir. Bir CSS stil sayfasındaki [type = text] {...} 'girdisi, IE6'da başarısız olur. – bobince

@bobince kanonik çözüm, bir RegEx ile HTML'yi ayrıştırabilir. Tahminimce –

-1

<!DOCTYPE html> 

<html> 
<head> 

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script> 


<script type="text/javascript"> 
$(document).ready(function(){ 

$(".post_class").css({padding:"10px",background:"#333",color:"#fff"}); 

$("#post_button").css({padding:"10px",background:"#333", textAlign:"center",color:"#fff",cursor:"pointer"}) 

$("#post_button").click(function(){ 
var input = $("input[name='checkListItem']").val(); 

$(".post_class").append('<div class="item">' + input + '</div>'); 

}); 

}); 
</script> 


</head> 

<body> 

<form name="checkListForm"> 

<input type="text" name="checkListItem"/> 

</form> 

<div id="post_button">Post</div> 

<br/> 

<div class="post_class"></div> 

</body> 

</html>

kaynak

2015-12-28 09:48:48

Bu, soruyu yanıtlamıyor, bu yüzden neden burada yayınlanıyor? – fisk

Tüm <input type'text> öğelerine Css sınıfı ekleniyor mu? Javascript/Css?

cevap

İlgili konular