Issue with jQuery addClass to input text box

Question

I'm trying to apply a simple class to an input text box, but oddly it is not working.

$('body, :text').addClass('courier');
$('body, input[type=text]').addClass('courier');
$('body, #text').addClass('courier');

.courier {
      font-family: Courier New, serif;
      background-color: #000;
      color: #ccc;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="text" id="text" />

I tried these three methods, but the changes are applied only to the body. I just also tried to add the class just to the input text.

$('body, :text').addClass('courier');
$('body, input[type=text]').addClass('courier');
$('body, #text').addClass('courier');

How can I do this?

The code you've posted works fine: jsfiddle.net/7t344 Something else must be going on. Please provide an example which demonstrates the problem. — KatieK
– KatieK, Commented Aug 21, 2013 at 22:34

amdorra · Accepted Answer · 2013-08-21 22:34:37Z

3

you should write

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

or

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

you can see it in this fiddle

answered Aug 21, 2013 at 22:19

amdorra

1,5549 silver badges18 bronze badges

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

2 Comments

i added a fiddle to demonstrate the code in action, you probably need to rap your code in the jQuery function or $(document).ready();

Well, I did some tests with the suggested code and I'm seeing the problem is not with the addClass. Sorry about the question.

Charlie74 · Accepted Answer · 2013-08-21 22:28:32Z

1

Since your element already has an ID... use that for reference...

This should be the simplest way to add a class to your input:

$('#text').addClass('courier');

answered Aug 21, 2013 at 22:28

Charlie74

2,91317 silver badges23 bronze badges