How can I apply css to elements created with append()

Question

I am trying to change the text colour of certain options in a but it is not working. none are red

    var style="color:red" 
    $('#newuserSelect')
        .append($('<option>', {
                value: "0",
                title: "hello",
                style: style
            })
            .text("my text"));

http://jsfiddle.net/ZDYEd/ the colour is black when it should be red

Pointy · Accepted Answer · 2013-12-05T16:35:22.900

3

The property name to use is "css", not "style". Also the value should be an object whose properties are the CSS properties to set.

$('#newuserSelect')
    .append($('<option>', {
            value: "0",
            title: "hello",
            css: { color: "red" }
        })
        .text("my text"));

You can, incidentally set the text with that initialization object too:

$('#newuserSelect')
    .append($('<option>', {
            value: "0",
            title: "hello",
            css: { color: "red" },
            text: "my text"
        })
    );

Now, this does work, but it's important to note that when you're looking at the page with the <select> element not "open", you're not looking at the <option> elements. If you want the selected text to be red, then you need to also style the <select> element itself. When there's only one <option>, the <select> cannot be "opened" so you never see the style of the <option>.

I can't recall exactly but it may be the case that IE, or old versions of it anyway, won't pay attention to styles on <option> elements. IE <select> was implemented in a really weird way in old versions.

edited Dec 05 '13 at 16:35

answered Dec 05 '13 at 16:28

Pointy

405,095
59
585
614

can a option element be styled – Arun P Johny Dec 05 '13 at 16:29
Well when the text is in the `` element's style. – Pointy Dec 05 '13 at 16:31
@ArunPJohny works as expected, maybe OP wants the color of select instead – A. Wolff Dec 05 '13 at 16:33
@ArunPJohny check the fiddle I linked in the answer. The style of the ` – Pointy Dec 05 '13 at 16:33
@ArunPJohny in chrome too – A. Wolff Dec 05 '13 at 16:34
2

yes it is working I was checking with 1 element where the highlighted color was hiding the red – Arun P Johny Dec 05 '13 at 16:35
Actually, `style` is a valid attribute, and would work just fine with a valid string -> http://jsfiddle.net/9s3cW/ – adeneo Dec 05 '13 at 16:37
@adeneo yes I realize that that's true, but it seems ugly to me to do it that way. That's just an aesthetic opinion however and so nobody should feel obliged to pay attention to me :) – Pointy Dec 05 '13 at 16:39

Rajaprabhu Aravindasamy · Answer 2 · 2013-12-05T16:41:46.927

Actually, $(xyz).append(abc) will return the object of xyz not abc. And by the way, The proper way to set the css for an element is to use .css() function. Please read here for full reference.

So I would suggest you to use .appendTo in your current context. That will fit your need. Unlike .append(), .appendTo() will return the object of xyz [$(xyz).appendTo(abc)]

Try this,

$('<option>', { value: "0", title: "hello" })
.appendTo('#newuserSelect')
.text('my text')
.css({color:'red'});

DEMO

score 0 · Answer 3 · answered Dec 05 '13 at 16:37

0

Why calling jQuery to create this tiny piece of HTML?

$('#newuserSelect').append(
    '<option value="0" title="hello" style="color:red">my text</option>'
);

answered Dec 05 '13 at 16:37

what if your value, title and text are dynamic ie not hard coded? then you'll need to break and canctinate your string like "...title=\\""+title+"'"~!!!@"£$"£!!!$~"£%@ – 124697 Dec 05 '13 at 16:43
@code578841441 Give a live example where this is actually a problem. – Dec 05 '13 at 16:44
1

each method has it's advantages and disadvantages. What you see as ugly code may look clean to someone else. I never use the `$("html",{options})` syntax because i find it looks ugly. Though, i also generally don't create html using jquery very often. – Kevin B Dec 05 '13 at 16:47

cpreid · Answer 4 · 2013-12-05T16:59:58.153

-1

Your JavaScript is fine. You can't color individual options with CSS. This is the output of your original fiddle!

This is your original fiddle

Edited: CSS Text color not taking effect in Chrome 31 for OSX Mavericks enter image description here

enter image description here

edited Dec 05 '13 at 16:59

answered Dec 05 '13 at 16:35

cpreid

521
3
12

[This is simply not correct.](http://jsfiddle.net/eJmb3/) (Well, the part about setting "style" is correct, though I wouldn't recommend messing with element styles that way.) – Pointy Dec 05 '13 at 16:36
maybe not fully cross browser but for sure, in some, option can be stylized – A. Wolff Dec 05 '13 at 16:36
Pointy, what are you talking about. I'm in Chrome 31 and coloring text isn't supported. Nice try. http://stackoverflow.com/a/17203491/448865 – cpreid Dec 05 '13 at 16:38
Your JavaScript is fine!! – cpreid Dec 05 '13 at 16:40
1

@cpreid check my fiddle and make sure you click the ` – Pointy Dec 05 '13 at 16:40
Ya man, checked it, text color does not get applied in Chrome! – cpreid Dec 05 '13 at 16:42
@cpreid which OS? Works here chrome 31 Win 7 – A. Wolff Dec 05 '13 at 16:42
Chrome 31 on OSX Mavericks – cpreid Dec 05 '13 at 16:51
At least state your sentence correctly. "You can't color individual options with CSS" means you can not do it at all, but definitely you can. You should say at least you can not for some browsers. – Caner Akdeniz Dec 05 '13 at 16:54
You might be right @cpreid, a screenshot (of the viewport) could prove it though. Edit your answer then I'll be able to remove my downvote. Cross browser testing is boring :D – Dec 05 '13 at 16:55
Yeah, I should have phrased differently. As far as I can tell, the original JavaScript was never the issue - take a look at the screenshot i included. – cpreid Dec 05 '13 at 16:56
Haha, cross-browser testing, always a blast :) – cpreid Dec 05 '13 at 17:02

How can I apply css to elements created with append()

4 Answers4

DEMO