Experiment with <select> elements.

Styling a select element to make it look like you can fill in blanks to sentences.

by Ian Hazzard

HTML

<body>
    <div id="chooser-disabled" class="hidden"></div>
     <h1>What are you looking for in a CSS framework?</h1>

    <br/>I'm looking for a
    <select id="friendly">
        <option value="customizable">customizable</option>
        <option value="minimal">minimal</option>
        <option value="responsive">responsive</option>
        <option value="" selected disabled></option>
    </select> CSS framework, that is designed to be
    <select id="includes" onchange="writeOutput()">
        <option value="mobile-friendly">mobile-friendly</option>
        <option value="fast">fast</option>
        <option value="awesome">awesome</option>
        <option value="" selected disabled></option>
    </select>.
    <br/>
    <br/>
    <p id="output"></p>
</body>

CSS

option[disabled] {
    display: none;
}
select {
    cursor: pointer;
    -webkit-appearance: none;
    outline: none;
    border: 0;
    background: transparent;
    border-bottom: 1px solid black;
    font: inherit;
}

JavaScript

function writeOutput() {

    var friendly = document.getElementById('friendly');
    var includes = document.getElementById('includes');
    var output = document.getElementById('output');

    var friendlyValue = friendly.options[friendly.selectedIndex].value;
    var includesValue = includes.options[includes.selectedIndex].value;
    
    output.innerHTML = '<a href="http://www.example.com">Example</a> is a very ' + friendlyValue + ' CSS framework, and it is extremely ' + includesValue + '.';

}