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


Tags: javascript,jquery,html,css

Problem :

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



Solution :

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.


    CSS Howto..

    how to make div fixed and ot move upon window resize

    Added ellipsis for long text but it showing below the text

    How to get Bootstrap's “hero-unit” to fit across the entirety of top section?

    How can I show only a section of a video frame with CSS or JavaScript?

    How can I specify relative positioning in HTML?

    How to increase or decrease space between two lines in same paragraph?

    How to cut the bottom overflow of page CSS/HTML

    How to add CSS to my HTML code on Notepad++

    How to use jQuery to horizontally center an object in the viewport?

    How to make a CSS animation/transition play at a fixed speed, not a fixed duration? [duplicate]

    How can one create horizontal tree view using CSS and HTML?

    How to make the height REALLY 100%

    How to NOT trigger hover effect on table row when hovering over specific element inside it

    How to style a SVG using CSS in javaFX FXML

    webpage works well on all browsers except Android Browser, which shows fonts with increased size

    Show first image and display none other image

    how to put image and texts on img html css

    How to manually apply styles from particular style sheet to an element?

    How can I style a JavaFX SplitMenuButton in CSS

    How to make a page look good printed/across multiple browsers

    Show jquery datepicker with HTML/CSS image

    In Wordpress how can I create a page which has 3 col-md-4 blocks in a container?

    JavaScript- How to change “message” div to yellow

    How to neutralize CSS definitions without overriding

    How to refine CSS media types and properties?

    Heroku Not Showing SCSS Background Images

    How can I position an element in the middle of the window while using position: absolute?

    CSS: how to make bottom div width same as the width of image above?

    IBM Worklight - How to disable Native device features?

    How to write a PHP code that will group students into groups of ten using data from a database? [closed]