Pure CSS form hints

by gkohen

HTML

<form action="#">
    
    <p>
        <label for="measureId" style="float:left">Save As:</label>
        <span class="myfield">
            <select id="measureId" class="text-input">
                <option value="11">Total Reconcile Impacts</option>
                <option value="12">Total Sales</option>
                <option value="13" selected="">Total Sales Aggr.</option>
                <option value="14">Total Forecast</option>
            </select>        
            <span class="hint ui-icon ui-icon-lightbulb" title="Applicable to Edit of Total Forecast only"></span>           
        </span>
    </p>
    
    <p style="clear:left">
        <label style="float:left" for="forecastId">Forecast ID:</label>
        <span class="myfield">
            <input id="forecastId" class="text-input">
<span class="hint ui-icon ui-icon-lightbulb" title="Applicable to all Editable PDMs"></span>                
            
            </span>
    </p>
    
</form>

CSS

label{
    display:block;
    font-weight:bold;
    padding-left:10px;
}

p {
	display: block;
	clear: both;
	float: left;
}

.myfield {
	position: absolute;
	left: 8em;
}
.help,.hint{
    /* Using display:none; would hide the text from screen-readers, hiding off-screen is more accessible. */
    position:absolute;
    left:-99999px;
}
.text-input:active + .help,
.text-input:focus + .help{
    position:static;
}
.text-input {
  float: left;   
}
.text-input:active + .hint,
.text-input:focus + .hint{
    position:static;
    
}
/** The following can be skipped if you already use jQuery**/
.icon {width: 295px;margin-top: 10px;margin-right: 5px;margin-bottom: 20px;position: relative;display: inline-block;}
.icon p {position: relative;margin-left: 60px;font-size: 0.8em;color: #666;}
.icon span.classname {color: #444;font-size: 1.2em;font-weight: bold;}
.icon span.tags {float: left;clear: left;}
 .ui-icon {
     width: 16px;
    height: 16px;
    display: block;
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_f0c500_256x240.png);
    float: left;
}
.ui-icon-lightbulb { background-position: -128px -128px; }.ui-icon-lightbulb.large { background-position: -192px -192px; }