向所有<input type='text'>元素添加CSS类？JavaScript / CSS？

Question

向所有<input type='text'>元素添加CSS类？JavaScript / CSS？

9

我想在我的网站上为每个文本框应用一个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实现？

如果这两种方法都不可行，我想我只能手动为每个文本框添加类了？

- 4imble

2个回答

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

- Sahil Jain

2

这完全没有回答问题，那么为什么要发布在这里呢？ - fisk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eglasius · Accepted Answer

据我所知，它是：

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

你同样可以在CSS文件中进行类似操作，但这需要CSS的更高版本或者取决于你想要支持旧版浏览器的范围。

请参阅这里的属性选择器。请注意：

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