adding css style to selected input fields using Jquery

Question

How can I set css style on page load to certain input boxes using jquery something like

$(document).ready(function() {
    $("input, textarea").addClass("idle");
    $("input, textarea").focus(function() {
        $(this).addClass("activeField").removeClass("idle");
    }).blur(function() {
        $(this).removeClass("activeField").addClass("idle");
    });
});

HTML

<input type="text" name="author" id="author" >
<input type="text" name=email id=email >

But this will add the style to each and every input and textarea which I want to avoid.

How can I apply the desired style to selective inputs/text area fields?

show the html and what you want to select, also look at jquery selectors: api.jquery.com/category/selectors — falsarella
– falsarella, Commented Jan 17, 2012 at 17:20

Troy Barlow · Accepted Answer · 2012-01-17 17:25:06Z

2

You need to identify the inputs by id or class. In your example, you could apply your classes to the author textbox only by doing:

$("#author").addClass("idle");

answered Jan 17, 2012 at 17:25

Troy Barlow

3132 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Glaz · Accepted Answer · 2012-01-17 17:21:05Z

0

In order to do this, you need to add something unique to each input and textarea that you want to apply your function. You could use class for example. So, give every textarea and input that you want to select the same class name, like class="switchCSS". Then you can apply your jquery like this:

$("input.switchCSS, textarea.switchCSS").addClass("idle");
//etc etc

answered Jan 17, 2012 at 17:21

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

Comments

CupOfTea696 · Accepted Answer · 2012-01-17 17:39:24Z

0

I suggest using only CSS to do this, instead of making two different classes you should make one class and a pseudo-class.

input, textarea{
    ...
}

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

I created a quick example to show this: http://jsfiddle.net/Gp8Rr/1/

In case you want only one (or certain) input elements to have this, you should create a specific class in css and a pseudo class, and just assign those classes in your html.

CSS:

.styled{
    ...
}

.style:focus{
    ...
}

HTML:

<input type="text" name="author" id="author" class="switch">
<input type="text" name="email" id="email">

Another quick example of this: http://jsfiddle.net/Apd6V/

edited Jan 17, 2012 at 17:39

answered Jan 17, 2012 at 17:23

CupOfTea696

1,2953 gold badges14 silver badges29 bronze badges

2 Comments

j08691 Over a year ago

He wants the CSS applied to specific elements, not just when they're being hovered over.

CupOfTea696 Over a year ago

@j08691 then he should create a specific class and assign it to the input element he wants to have this class on. I'll edit my answer right away.

Collectives™ on Stack Overflow

adding css style to selected input fields using Jquery

HTML

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related