How to format select box with Material Design Lite?

Chase picture Chase · Jul 9, 2015 · Viewed 47.3k times · Source

I've read through the Components listing and read through the CSS provided, but I don't see any mention of select boxes - just regular inputs; text, radio, checkbox, textarea, etc.

How do you use Material Design Lite with a select box? Using the classes for a regular text input gets you halfway there, but it is certainly not correct.

Answer

John Knotts picture John Knotts · Apr 14, 2017

This worked pretty well for me (using fuel as an example):

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <select class="mdl-textfield__input" id="octane" name="octane">
          <option></option>
          <option value="85">85</option>
          <option value="87">87</option>
          <option value="89">89</option>
          <option value="91">91</option>
          <option value="diesel">Diesel</option>
        </select>
        <label class="mdl-textfield__label" for="octane">Octane</label>
      </div>

No libraries or anything needed just the standard MDL CSS and JavaScript.