jQuery: Assign CSS only to elements with specific attribute

Question

I've got a form (using jQueryUI tabs), where I want the text input elements with readonly="readonly" to have a CSS value of border:0;. So far I've got (using the jQuery docs):

$(":input[type='text'][readonly='readonly']").each(function()
{
    $(this).css('border', '0;');
});

Which doesn't do anything at all. When I add $(document).ready() to the above, my jQuery tabs break (but the sliders don't). If I only have $(document).ready() with no content, it's fine. I think the issue lies within the first line, but I'm not sure.

I don't want to do this with id/class. If it's possible to do only with CSS, that'd be great, but I can't think of a way.

Selvakumar Arumugam · Accepted Answer · 2012-05-10 15:22:31Z

6

How about a simple css

input[readonly] { border-width: 0px; }

answered May 10, 2012 at 15:22

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

2 Comments

SomeKittens Over a year ago

sigh Here I go again, making things 10x harder for myself. Thanks for the quick (and easy) response.

Steve Ross Over a year ago

Also always fire up firbeug and try out your selectors in the console. Will save you a lot of headaches if you know whether or not your jQuery selectors are actually returning anything.

Alexander Pavlov · Accepted Answer · 2012-05-10 15:24:48Z

1

Plain CSS declaration aside, your ":input[type='text'][readonly='readonly']" seems to have a stray leading colon : which actually designates a pseudoclass (and input is a tag name). Also, try removing the trailing ; in '0;' (or use '0px' instead).

answered May 10, 2012 at 15:24

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

Comments

Michael · Accepted Answer · 2012-05-10 15:27:22Z

1

$("input[type='text'][readonly='readonly']").each(function(){
    $(this).css('border', '0');
});

JSFiddle

answered May 10, 2012 at 15:27

Michael

3,4261 gold badge22 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery: Assign CSS only to elements with specific attribute

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related