Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to format select box with Material Design Lite?

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.

like image 998
Chase Avatar asked Jul 09 '15 03:07

Chase


People also ask

Is material design LITE good?

Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.

What is material design Lite used for?

Material Design Lite. Material Design Lite lets you add a Material Design look and feel to your websites. It doesn't rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.


1 Answers

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.

like image 194
John Knotts Avatar answered Sep 28 '22 15:09

John Knotts