CP: calendar alternatives

by larsolesimonsen

HTML

<div class="dont-print" id="search-criteria">
    <label> <span>Startdato</span>
        <input type="text" value="10-10-10" id="Overviewdatepicker"/>
        <img />
    </label>
    <label> <span>Periode</span>
        <select id="timeScope"> <option>Foo</option></select>
    </label>
    
    <input type="submit" class="button" name="submitCalendarform" title="submitCalendarform"
    value="Genopfrisk"/>
</div>
<br style="clear:both"/>
<fieldset class="form-layout">
    <div class="item">
        <label for="Overviewdatepicker">Startdato</label>
        <div>
                <input type="text" value="10-10-2010" id="Overviewdatepicker"/>
                <img/>
        </div>
    </div>
    <div class="item">
        <label for="timeScope">Periode</label>
        <div >
            <select id="timeScope"> <option>Foo</option></select>            
        </div>
    </div>
    <input type="submit" class="button" name="submitCalendarform" title="submitCalendarform"
    value="Genopfrisk"/>
</fieldset>

CSS

img { background-color: red; width: 16px; height:16px; }

#search-criteria * { float:left; vertical-align:middle;}
#search-criteria script { display:none; }
#search-criteria label, #search-criteria img, #search-criteria div { margin-right: 5px; }
#search-criteria input[type=submit] { float: right; }

.form-layout  { padding: 12px; }
.form-layout > * { clear: both; }/*reset float settings for the new form line*/
.form-layout .item > * { width:80%; float: right; margin-bottom: 10px; }/*properties for the input fields*/
.form-layout .item > label { width: 20%; float:left; }/*Properties for the input field labels*/
.form-layout .button { width: auto; } /*Buttons should always be autosized*/
.form-layout .inline-item { margin-left: 10px; }/*Adjacent inline items should be spaced*/
.large-text-area { height: 200px; display: block; }