將Css類添加到所有<input type'text'>元素？ Javascript/Css？

我想一個CSS類適用於每一個文本框在我的網站：將Css類添加到所有<input type'text'>元素？ 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>

我想，嘿！簡單。我將添加一個jquery函數在masterpage中查找它們。

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

不幸的是，這也會選擇提交按鈕。我如何才能選擇具有文本類型屬性的輸入元素？

Alternativly是否可以使用完全CSS？

如果這兩種方法都不可行，我想我只需要手動將該類添加到每個文本框中。

來源

2010-05-14 4imble

AFAIK它：

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

你可以做在CSS文件類似，但需要更高的版本，這取決於你想如何廣泛，與舊的瀏覽器CSS /的。

請參閱here中的屬性選擇器。需要注意的是：

「瀏覽器支持：不支持CSS3屬性選擇唯一的瀏覽器IE6是兩個IE7和IE8，Opera和Webkit-和基於Gecko的瀏覽器可能會使用他們在您的樣式表。絕對安全。「

來源

2010-05-14 17:01:16 eglasius

非常好，非常感謝。 – 4imble 2010-05-14 17:09:42

'$（'input [type = text]'）'將在IE6中工作，因爲jQuery將回退到使用自己的選擇器引擎而不是瀏覽器的內置支持。另一方面，在CSS樣式表中輸入[type = text] {...}'會在IE6中失敗。 – bobince 2010-05-14 17:25:40

@bobince規範的解決方案將解析與RegEx的HTML我猜 – 2013-09-20 10:13:29

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

來源

2015-12-28 09:48:48

這並不回答這個問題，爲什麼這張貼在這裏？ – fisk 2015-12-28 09:59:38

將Css類添加到所有<input type'text'>元素？ Javascript/Css？

回答

相關問題