首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用Jquery将css样式添加到所选输入字段

使用Jquery将css样式添加到所选输入字段
EN

Stack Overflow用户
提问于 2012-01-18 01:16:44
回答 3查看 1.9K关注 0票数 0

如何使用jquery将页面加载时的css样式设置为某些输入框

代码语言:javascript
运行
复制
$(document).ready(function() {
    $("input, textarea").addClass("idle");
    $("input, textarea").focus(function() {
        $(this).addClass("activeField").removeClass("idle");
    }).blur(function() {
        $(this).removeClass("activeField").addClass("idle");
    });
});

HTML

代码语言:javascript
运行
复制
<input type="text" name="author" id="author" >
<input type="text" name=email id=email >

但是这会将样式添加到我想要避免的每个输入和文本区。

如何将所需样式应用于选择性输入/文本区域字段?

EN

Stack Overflow用户

发布于 2012-01-18 01:23:54

我建议只使用CSS来实现这一点,而不是创建两个不同的类,而应该创建一个类和一个伪类。

代码语言:javascript
运行
复制
input, textarea{
    ...
}

input:focus, textarea:focus{
    ...
}

我创建了一个快速示例来说明这一点:http://jsfiddle.net/Gp8Rr/1/

如果你只想让一个(或某些)输入元素拥有它,你应该在css中创建一个特定的类和一个伪类,然后在html中分配这些类。

CSS:

代码语言:javascript
运行
复制
.styled{
    ...
}

.style:focus{
    ...
}

HTML:

代码语言:javascript
运行
复制
<input type="text" name="author" id="author" class="switch">
<input type="text" name="email" id="email">

另一个简单的例子是:http://jsfiddle.net/Apd6V/

票数 0
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8898864

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档