Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is the css for your need</p> <pre><code>&lt;style&gt; .ui-btn-active { background-image: -webkit-gradient(linear,left top,left bottom,from( #44C723 ),to( #317220 )); background-image: -webkit-linear-gradient( #44C723,#317220 ); background-image: -moz-linear-gradient( #44C723,#317220 ); background-image: -ms-linear-gradient( #44C723,#317220 ); background-image: -o-linear-gradient( #44C723,#317220 ); background-image: linear-gradient( #44C723,#317220 ) } .ui-btn-down-e{ background-image: -webkit-gradient(linear,left top,left bottom,from( #d2232b ),to( #d2232b )); background-image: -webkit-linear-gradient( #d2232b,#d2232b ); background-image: -moz-linear-gradient( #d2232b,#d2232b ); background-image: -ms-linear-gradient( #d2232b,#d2232b ); background-image: -o-linear-gradient( #d2232b,#d2232b ); background-image: linear-gradient( #d2232b,#d2232b ) } .online { color: yellow !important } // for changing text color .offline { color: #fff !important } // for changing text color &lt;/style&gt; </code></pre> <p>Add some javascript</p> <pre><code>&lt;script&gt; $('[role=application] span:first-child').addClass('online'); $('[role=application] span:nth-child(2)').addClass('offline'); &lt;/script&gt; </code></pre> <p>This is your html</p> <pre><code>&lt;div id="switch"&gt; &lt;select name="toggleswitch1" id="toggleswitch1" data-track-theme="e" data-role="slider"&gt; &lt;option value="off"&gt; Offline &lt;/option&gt; &lt;option value="on"&gt; Online &lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <p>Here the .ui-btn-active,.ui-btn-down-e class in css is used to change the background color in different browsers you can change your color here if needed. the javascript is used to change the text color of online and offline. Here is the example fiddle <a href="http://jsfiddle.net/arunkumarthekkoot/95gPP/" rel="nofollow">http://jsfiddle.net/arunkumarthekkoot/95gPP/</a></p> <p>I hope this will work for you.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload