代码之家 › 专栏 › 技术社区 › 4imble

向所有<input type'text'>元素添加css类?javascript/css?

css html jquery

4imble · 技术社区 · 16 年前

我要将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?

如果这两种方法都不可能,我想我只需要手动将类添加到我创建的每个文本框中?

2 回复 | 直到 10 年前

atiquratik jaywon 12 年前

它是:

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

你也可以在css文件中做类似的事情,但是这需要更高版本的css/这取决于你想在旧浏览器中有多广泛。

请参见中的属性选择器 here . 注意:

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

-1

Andreas Louv 10 年前

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

推荐文章