CSS Forms styling

by ramsesoriginal

HTML

<form>
    <ol>
        <fieldset>
            <legend>Account</legend>
                <li><label for="username">Username</label><input type="text" id="username" required  /></li>
                <li><label for="password">Password</label><input type="password" id="password" required  /></li>
        </fieldset>
        
        <fieldset>
            <legend>Personal Data</legend>
                <li><label for="name">Name</label><input type="text" id="name" /></li>
                <li><label for="surname">Surname</label><input type="text" id="surname" /></li>
                <li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
        </fieldset>
        
        <fieldset>
            <legend>Contact Information</legend>
                <li><label for="email">E-mail</label><input type="email" id="email" required placeholder="example@example.com" /></li>
                <li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
             pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
                <li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
        </fieldset>
        
        <li><input type="submit" /></li>
    </ol>
</form>

CSS

fieldset {
    border: 1px solid silver;
    margin: 10px;
    padding: 10px;
    min-width: 100px;
    display: inline-block;
}

fieldset li{
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 2px;
}

fieldset label{
    margin-right: 10px;
    position: relative;
}

fieldset label:after{
    content: ": ";
    position: absolute;
    right: -0.2em;
}

fieldset input{
    float: right;
}

fieldset li .additionalInfo{
    position: absolute;
    padding: 5px;
    margin-top: 5px;
    display: none;
    background-color: white;
    border: 1px solid black;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

fieldset li:hover .additionalInfo{
    display: block;
}