Form Split

by Ryan Perez

HTML

<table class="webform" cellspacing="0" cellpadding="2" border="0">
        <tbody>
            <tr>
                <td>
                    <label for="Title">Title</label>
                    <br>
                    <select name="Title" id="Title" class="cat_dropdown_smaller">
                        <option value="6686997">DR</option>
                        <option value="6686996">MISS</option>
                        <option value="6686993" selected="selected">MR</option>
                        <option value="6686994">MRS</option>
                        <option value="6686995">MS</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="FirstName" class="">First Name <span class="req">*</span> </label>
                    <br>
                    <input name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" type="text"> </td>
            </tr>
            <tr>
                <td>
                    <label for="LastName">Last Name <span class="req">*</span> </label>
                    <br>
                    <input name="LastName" id="LastName" class="cat_textbox" maxlength="255" type="text"> </td>
            </tr>
            <tr>
                <td>
                    <label for="EmailAddress">Email Address <span class="req">*</span> </label>
                    <br>
                    <input name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" type="text"> </td>
            </tr>
            <tr>
                <td><div style="display: none">
<input type="text" name="s_content" id="s_content" class="cat_textbox">
<input type="text" name="s_summary" id="s_summary" class="cat_textbox" value="e96e287617534fc88de16e6961fee89a">
</div>
</td>
            </tr>
            <tr>
                <td>
                    <label for="FileAttachment">Attach File (250Mb Limit <span class="req">*</span>)</label>
                   ...

CSS

/* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
    opacity: 0;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
	width: 27px;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */
    
    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
	text-indent: 0;
}