将 Css 类添加到所有 <input type'text'> 元素？ Javascript/CSS？答案

【问题标题】：Adding Css class to all <input type'text'> elements? Javascript / Css?将 Css 类添加到所有 <input type'text'> 元素？ Javascript/CSS？
【发布时间】：2010-05-14 16:59:20
【问题描述】：

我想为我网站中的每个文本框应用一个 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 函数以在母版页中找到它们。

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

不幸的是，这也会选择提交按钮。如何只选择具有文本类型属性的输入元素？

另外，这是否可能完全使用 CSS？

如果这两种方法都不可行，我想我只需要手动将类添加到我制作的每个文本框？

【问题讨论】：

标签： jquery html css

【解决方案1】：

相信它是：

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

您可以在 CSS 文件中执行类似操作，但这需要更高版本的 CSS / 取决于您希望在旧版浏览器中的应用范围。

参见here 中的属性选择器。请注意：

“浏览器支持：唯一不支持 CSS3 属性选择器的浏览器是 IE6。IE7 和 IE8，Opera 和基于 Webkit 和 Gecko 的浏览器都支持。所以在你的样式表中使用它们绝对是安全的。”

【讨论】：

$('input[type=text]') 将在 IE6 中工作，因为 jQuery 将退回到使用自己的选择器引擎而不是浏览器的内置支持。另一方面，CSS 样式表中的input[type=text] { ... } 在 IE6 中会失败。
@bobince 我猜规范的解决方案是用正则表达式解析 HTML

【解决方案2】：

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

【讨论】：

这根本不能回答问题，为什么要在这里发布？