<!DOCTYPE html> <html lang="en"> <head> <title>Select styles with CSS only</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../src/select-css.css"> <link rel="stylesheet" href="demo.css"> </head> <body> <h1>CSS-only custom-styled selects</h1> <h4><a href="http://www.filamentgroup.com">Filament Group Inc.</a></h4> <p>This is a demo page for <a href="https://github.com/filamentgroup/select-css">the select-css plugin</a>.</p> <label>Native select</label> <select> <option>Apples</option> <option>Bananas</option> <option>Grapes</option> <option>Oranges</option> <option selected>A very long option name to test wrapping</option> </select> <label>Same select w/ CSS applied</label> <select class="select-css"> <option>Apples</option> <option>Bananas</option> <option>Grapes</option> <option>Oranges</option> <option selected>A very long option name to test wrapping</option> </select> <div style="width:50%; min-width:10em;"> <label>Same, in a 50% wide container</label> <select class="select-css"> <option>Apples</option> <option>Bananas</option> <option>Grapes</option> <option>Oranges</option> <option selected>A very long option name to test wrapping</option> </select> </div> <label style="display: inline-block;">Same, styled inline block: </label> <select class="select-css" style="display: inline-block; width: auto;"> <option>Apples</option> <option>Bananas</option> <option>Grapes</option> <option>Oranges</option> <option selected>A very long option name to test wrapping</option> </select> <label>Text input: <input type="text" placeholder="I'm a placeholder"> </label> <div class="dark-wrapper"> <label>Same select inside a dark wrapper</label> <select class="select-css"> <option>Apples</option> <option>Bananas</option> <option>Grapes</option> <option>Oranges</option> <option selected>A very long option name to test wrapping</option> </select> </div> <p style="font-size: 0.8rem;"> Note: in Firefox, using gradients on the <code><select></code> background without a solid fallback color can make the option list unreadable. <a href="https://github.com/filamentgroup/select-css/pull/14">See pull request #14</a> for details. </p> </body> </html>