Styling Select Element

As an alternative to using checkboxes.

by Matthew Day

HTML

<div ng-app="myApp">
  <div ng-controller="MainCtrl as vm">
    <form name="myForm">
      <select ng-model="vm.selected.array" multiple>
        <option ng-repeat="fruit in vm.fruits" value="{{fruit}}">{{fruit}}</option>
      </select>
    </form>
    <pre>Selected Array: {{vm.selected}}</pre>
  </div>
</div>

CSS

* {
  background: white;
}

select {
  background: none;
  border: none;
  height: 200px;
  overflow: hidden;
  outline-style: none;
}

select > option {
  box-shadow: inset 20px 20px #fff; // hides blue background when an option is selected
}

option:checked {
  color: red !important;  // does not work
}

option {
  margin: 8px 0 8px 42px;
  position: relative;
}

option:before {
  border: 1px solid gray;
  color: white;
  content: 'x';
  font-size: 10px;
  position: absolute;
  top: 0;
  left: -20px;
  height: 10px;
  width: 10px;
}

JavaScript

// See notes below

angular.module('myApp', []);

angular.module('myApp').controller('MainCtrl', function() {
  var vm = this;
  vm.selected = {
  	array: []
  }
  vm.fruits = ["apple", "orange", "pear", "naartjie"];
});



//for box-shadow to hide selected color
//http://stackoverflow.com/questions/19388011/how-to-change-colour-of-blue-highlight-on-select-box-dropdown

//TODO
//Figure out how to keep text from going white on select