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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With