CODEWITHSUNDEEP
jquery-mobile
WhatsInAName
WhatsInAName

Reputation: 724

jQuery mobile custom select menu with options with different styles

Is it possible to stylize the different options in a jquery mobile custom select menu (http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html)?

My project needs the background of the different options to be different color. I've been searching for a while now and have not come across a solution.

Thanks for any help.

Upvotes: 0

Views: 4014

Answers (3)

user714136
user714136

Reputation: 1

In jQuery Mobile 1.4.5 generated structure is changed a little bit, so you have to change CSS the following way to make it working:

#Droplet-menu li:nth-child(1) .ui-btn {background-color:Red; }
#Droplet-menu li:nth-child(1) .ui-btn {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

#Droplet-menu li:nth-child(2) .ui-btn {background-color:Blue;}
#Droplet-menu li:nth-child(2) .ui-btn {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}
...

Upvotes: 0

WhatsInAName
WhatsInAName

Reputation: 724

Here's how I resolved this.

This is my select menu:

    <select data-inline="true" data-native-menu="false" data-theme="d" data-val="true" data-val-number="The field DropletId must be a number." data-val-required="The DropletId field is required." id="Droplet" name="Plan.DropletId" style="margin-right:0px;">
    <option value="1">Ultra Coarse (UC)</option>
    <option value="2">Extra Coarse (XC)</option>
    <option selected="selected" value="3">Very Coarse (VC)</option>
    <option value="4">Coarse (C)</option>
    <option value="5">Medium (M)</option>
    <option value="6">Fine (F)</option>
    <option value="7">Very Fine (VF)</option>
    <option value="8">Extra Fine (XF)</option>
   </select>

CSS:

    #Droplet-menu li:nth-child(1) >  div{background-color:Red; }
    #Droplet-menu li:nth-child(1) >  div > div > a {color: #FFFFFF !important;   text-shadow: #3373A5 0px 1px 1px}

    #Droplet-menu li:nth-child(2) > div{background-color:Blue;}
    #Droplet-menu li:nth-child(2) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

    #Droplet-menu li:nth-child(3) > div{background-color:Green;}
    #Droplet-menu li:nth-child(3) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

    #Droplet-menu li:nth-child(4) >  div{background-color:Yellow;}
    #Droplet-menu li:nth-child(4) >  div > div > a {color: #333333 !important;}

    #Droplet-menu li:nth-child(5) > div{ background-color:Black;}
    #Droplet-menu li:nth-child(5) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

    #Droplet-menu li:nth-child(6) > div{background-color: Fuchsia;}
    #Droplet-menu li:nth-child(6) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

    #Droplet-menu li:nth-child(7) > div{background-color:Aqua;}
    #Droplet-menu li:nth-child(7) >  div > div > a {color: #333333 !important;}

    #Droplet-menu li:nth-child(8) > div{background-color:Olive;}
    #Droplet-menu li:nth-child(8) >  div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}

Although this added different styles to the jQuery Mobile custom select, the selected item after selection lost the required styles.

So, more css:

    .droplet1 {background-color:Red; color: White; text-shadow: #3373A5 0px 1px 1px;}
    .droplet2 {background-color:Blue; color: White; text-shadow: #3373A5 0px 1px 1px;}
    .droplet3 { background-color:Green; color: White; text-shadow: #3373A5 0px 1px 1px;}
    .droplet4 { background-color:Yellow; color: Black;}
    .droplet5 { background-color:Black; color: White; text-shadow: #3373A5 0px 1px 1px;}
    .droplet6 { background-color: Fuchsia; color: White; text-shadow: #3373A5 0px 1px 1px}
    .droplet7 {background-color:Aqua; color: Black;}
    .droplet8 { background-color:Olive; color: White; text-shadow: #3373A5 0px 1px 1px;}

...and a little jquery:

    var prevClass = "";

    $(document).ready(function () {
    var selDroplet = $("#Droplet option:selected").attr('value');
    var dropletCssClass = "droplet" + selDroplet;
    $('#Droplet-button span:nth-of-type(1)').addClass(dropletCssClass);
  });

    $("#Droplet").change(function () {
    var str = "";

    $("#Droplet option:selected").each(function () {
    str = "droplet" + $(this).attr('value');

    $("#SelectedDroplet").val($(this).attr('value'));
    $('#Droplet-button span:nth-of-type(1)').removeClass(prevClass);
    $('#Droplet-button span:nth-of-type(1)').addClass(str);
    prevClass = str;
  });


})
.change();

This code has been tested to work on both iPad and Samsung Galaxy 10.1 tablet.

Demo: http://jsfiddle.net/Debarupa/7TsVM/

Hope it would help somebody else.

Thanks Aurelio De Rosa for pointing me to the right direction.

Upvotes: 0

Aurelio De Rosa
Aurelio De Rosa

Reputation: 22152

The method is always the same, and that is using the nth-child selector to select the <li>s that you want (and then change the <div>s inside them). You can use it with CSS3 (better) or with jQuery. You have to combine nth-child with the child of the element ul.ui-listview. Something like this:

ul.ui-listview > li:nth-child(2n) > div {background-color: green}
ul.ui-listview > li:nth-child(2n+1) > div {background-color: red}

or with jQuery:

$('ul.ui-listview > li:nth-child(2n) > div').css('background-color', 'green');
$('ul.ui-listview > li:nth-child(2n+1) > div').css('background-color', 'red');

Upvotes: 2

Related Questions