Themes

HTML

<script src="http://emtolis.gr/tsamigr/ccombo/libs/jquery.ba-outside-events.min.js"></script>
<script src="http://emtolis.gr/tsamigr/ccombo/v2.0/jquery.combo.js"></script>
<link rel="stylesheet" href="http://emtolis.gr/tsamigr/ccombo/v2.0/css/style.css">
<h1>ccombo - differrent themes</h1>
<hr />
<div class='buttons'>
    <input class='stylishBut ' id ='create' type='button' value='Create ccombos' />
</div>
<hr /><br />
<div class='example'>
    <div id='blue'></div>
</div>
<div class='example'>
    <div id='green' ></div>
</div>
<div class='example'>
    <div id='orange'></div>
</div>
<select id='ex1' class='noId'>
    <option value='saf'>Safari</option>
    <option value='fire'>Firefox</option>
    <option value='op'>Opera</option>
    <option value='chr'>Chrome</option>
    <option value='Netscape'>Netscape Navigator</option>
    <option value='Camino'>Camino</option>
    <option value='Sm'>SeaMonkey</option>
    <option value='k'>K-Meleon</option>
    <option value='Galeon'>Galeon</option>
    <option value='Konqueror'>Konqueror</option>
    <option value='Maxthon'>Maxthon Browser</option>
    <option value='Flock'>Flock </option>
    <option value='Amaya'>Amaya</option>
    <option value='Dragon'>Comodo Dragon</option>
    <option value='Avant'>Avant Browser</option>
    <option value='Epiphany'>Epiphany</option>
    <option value='Lynx'>Lynx</option>
    <option value='RockMelt'>RockMelt</option>
    <option value='Voyager'>Voyager</option>
    <option value='Dillo'>Dillo Web Browser</option>
    <option value='ie'>Microsoft Internet explorer. Windows browser</option>
    <option value='Slim'>Slim Browser</option>
</select>

CSS

.stylishBut {
    background: none repeat scroll 0 0 #F0F7FB;
    border: 1px solid #B8CFE5;
    color: #1C94C4;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    height: 25px;
    min-width: 70px;
    padding: 2px;
}

.stylishBut:hover{
    background: none repeat scroll 0 0 #FDFADA;    border: 1px solid #FBCB09;
    color: #C77405 !important;
    font-weight: bold;
}

.buttons{
    margin-bottom:10px;   
}

JavaScript

jQuery(document).ready(function() {
    jQuery('#create').click(

    function() {
        var created = jQuery('#blue').combo({
            'selectId': 'ex1',
            'skin': 'default'
        });
        
});