angularjs selectBoxIt自定义主题

Question

I use selectBoxIt component in my project. And I would like change style, like this:

And I use next code for implement this component:

 <select id="appVersions">
            <option ng-repeat="app in appVersions" value="{{app.version}}">APP vr.{{app.version}}</option>
          </select>



  var apps = $('#appVersions').selectBoxIt({
                        theme: 'jqueryui',
                        autoWidth: true
                    });

                    $timeout(function () {
                        apps.data('selectBox-selectBoxIt').refresh();
                    });

But after it he transform to default style, how to change style? Thanks a lot.

Answer 1

Add id to tags select

#appVersions .selectboxit-container {
    margin-top: 10px;
    margin-left: 70px;
    background-color: $main-background;
  }

  #appVersions .selectboxit-container span #SelectBoxItText {
    color: #FFB201;
    font-weight: bold;
  }

  #appVersions ul li a {
    color: #FFB201;
  }

  #appVersions ul li a:hover {
    font-weight: bold;
  }

  #appVersions ul {
    background-color: $main-background;
  }