title: How to change the color of the item being selected in md-select in Angular Material?
body: <p>I am using the dark theme in angular-material 1.0.4. This is how the select element looks like when selecting an item:</p>
  
  <p><a href="https://i.stack.imgur.com/FRU0r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FRU0r.png" alt="Selecting item in dark theme"></a></p>
  
  <p>And this is how it looks like when using the default theme:</p>
  
  <p><a href="https://i.stack.imgur.com/3fn1M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3fn1M.png" alt="Selecting item in default theme"></a></p>
  
  <p>The dark theme doesn't handle the color very well. How can I change the background color of the item being selected (light grey on the pictures), or the color of the text of the item? </p>
  
  <p>I use only the default css:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="lib/angular-material/angular-material.css"&gt;
  </code></pre>
  
  <p>And this is the definition of the select:</p>
  
  <pre><code>        &lt;md-input-container flex="30"&gt;
              &lt;label&gt;Branch&lt;/label&gt;
              &lt;md-select ng-model="selectedBranch"&gt;
                  &lt;md-option ng-repeat="b in branches" value="{{b.id}}"&gt;
                      {{b.name}}
                  &lt;/md-option&gt;
              &lt;/md-select&gt;
          &lt;/md-input-container&gt;
  </code></pre>
  
  <p>And this is how I initialise the dark theme:</p>
  
  <pre><code>app.config(function ($mdThemingProvider) {
      $mdThemingProvider.theme('default')
          .dark()
          .primaryPalette('orange')
          .accentPalette('yellow')
          .warnPalette('deep-orange');
  });
  </code></pre>
  
  <p><strong>NOTE:</strong> The problem is not solved using a colour on mouse hover, because the item can be selected by keyboard as well.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> In the end, the answer was all about figuring out that the event, which colours the text, is "focus". </p>