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

回答

相关问题