Aligning/styling checkboxes with rest of form

Question

I'm trying to align and style a set of checkboxes with the rest of my form, but I don't have much experience styling forms. I'm struggling to reference the legend, labels, and input boxes separately. I've seen checkboxes structured with different mark-up, so I'm not sure if there's a better way to accomplish this.

Intended layout/style:

HTML:

<div id="appraisals-form" class="contact-form">
    <form role="form" method="post" action="contact-form.php">
        <label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
        <label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
        <label for="email"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>

        <label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>

        <label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's artist."></label>

        <label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's title."></label>

        <label for="measurements"><span>Measurements</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's measurements." /></label>

        <label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's date / age."></label>

        <label for="condition"><span>Condition</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your item's condition."></textarea></label>

        <label for="doc" class="wrap"><span class="wrap-lg">Documentation</span><span class="wrap-sm">(certificates, receipts, previous appraisals, etc.)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's documentation."></textarea></label>

        <label for="writing" class="wrap"><span class="wrap-lg">Writing / Labels</span><span class="wrap-sm">(text or any writing or labels on the art)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's text / labels."></textarea></label>

        <label for="purchase-hist" class="wrap"><span class="wrap-lg">Purchase History</span><span class="wrap-sm">(date, cost, location, etc.)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's purchase history."></textarea></label>

        <label for="additional" class="wrap"><span class="wrap-lg">Additional Details</span><span class="wrap-sm">(anything else you know)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's additional details."></textarea></label>

        <fieldset>
            <legend>Type of Appraisal</legend>
            <input type="checkbox" name="app-type" value="Insurance" />Insurance
            <input type="checkbox" name="app-type" value="Donation" />Donation
            <input type="checkbox" name="app-type" value="General Estate Planning" />General Estate Planning
        </fieldset>

        <div class="centred-button"><input type="submit" value="" class="submit-button" /></div>                  
    </form>             
</div>

CSS:

.contact-form {
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
    font-size: 20px;
}

.contact-form label {
    display: block;
    margin: 0px 0px 15px 0px;
    text-transform: uppercase; /* New */
}

.contact-form label > span {
    padding-top: 8px;
}

.contact-form label > span, #recaptcha::before {
    width: 100px;
    text-align: right;
    float: left;
    padding-right: 20px;
    content: "";
}

.contact-form input, .contact-form textarea, .contact-form fieldset {
    margin-bottom: 15px;
    padding: 10px;
    border: none;
}

.contact-form input.input-field {
    width: 70%;
    height: 20px;
    font-size: 18px;
}

.contact-form .textarea-field {
    height: 250px;
    margin-bottom: 11px;
}

.contact-form .textarea-field, .g-recaptcha {
    width: 70%;
    font-size: 18px;
    display: inline-block;
}

.contact-form fieldset { /* New */
    font-size: 16px;
}

.contact-form legend { /* New */
    width: 150px;
    text-align: right;
    float: left;
    padding-right: 20px;
    content: "";
    text-transform: uppercase;
}

.contact-form fieldset input { /* New */
    margin-right: 10px;
    text-align: left;
}

.g-recaptcha {
    height: 78px !important;
}

#recaptcha {
    display: block;
    margin: 0px 0px 24px 0px;
}

textarea {
    resize: none;
}

textarea:focus, input:focus {
    outline: 0;
}

input.submit-button {
    background-image: url("../img/submit-button.jpg");
    width: 225px;
    height: 60px;
    border: none;
}

Fiddle: http://jsfiddle.net/trqgos4q/.

Any help would be really appreciated!

score 4 · Accepted Answer · answered Aug 22 '15 at 19:36

4

It looks like you're using a fixed layout, so I added a margin-left to your first input, and added box-sizing: border-box to your appraisal label so it no longer pushes the input labels to the right.

These changes make it so the checkboxes align like you were looking for.

Here is the relevant CSS:

#appraisalTypeWrap > legend {
    box-sizing: border-box;
}

#appraisalTypeWrap > input:first-of-type {
    margin-left: 10px;
}

I gave the "Type of Appraisal" fieldset the appraisalTypeWrap id, so that's what this CSS targets.

Working JSFiddle: http://jsfiddle.net/trqgos4q/2/

answered Aug 22 '15 at 19:36

Maximillian Laumeister

19,884
8
59
78

That did it. Thanks! Is the best way to style the checkbox itself by hiding the input and wrapping it with a div that gets the styling? – Mario Parra Aug 22 '15 at 19:47
@MarioParra For more details on styling checkboxes, check out this post: https://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css – Maximillian Laumeister Aug 22 '15 at 21:17

score 2 · Answer 2 · answered Aug 22 '15 at 19:11

Best i can do for you right now.. but you should rewrite your html ;) (also i didn't change any html code..)

#appraisals-form {
  width: 650px;
}
label {
  display: block;
}
label > span:first-child {
  display: block;
  float: left;
  width: 150px
}
label > span:nth-child(2) {
  display: block;
  float: right;
}
label textarea,
label input {
  width: 180px;
}

<div id="appraisals-form" class="contact-form">
  <form role="form" method="post" action="contact-form.php">
    <label for="name"><span>Name</span>
      <input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." />
    </label>
    <label for="email"><span>Email</span>
      <input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." />
    </label>
    <label for="email"><span>Phone</span>
      <input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." />
    </label>

    <label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span>
      <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork.">
    </label>

    <label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span>
      <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's artist.">
    </label>

    <label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span>
      <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's title.">
    </label>

    <label for="measurements"><span>Measurements</span>
      <input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's measurements." />
    </label>

    <label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span>
      <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's date / age.">
    </label>

    <label for="condition"><span>Condition</span>
      <textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your item's condition."></textarea>
    </label>

    <label for="doc" class="wrap"><span class="wrap-lg">Documentation</span><span class="wrap-sm">(certificates, receipts, previous appraisals, etc.)</span>
      <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's documentation."></textarea>
    </label>

    <label for="writing" class="wrap"><span class="wrap-lg">Writing / Labels</span><span class="wrap-sm">(text or any writing or labels on the art)</span>
      <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's text / labels."></textarea>
    </label>

    <label for="purchase-hist" class="wrap"><span class="wrap-lg">Purchase History</span><span class="wrap-sm">(date, cost, location, etc.)</span>
      <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's purchase history."></textarea>
    </label>

    <label for="additional" class="wrap"><span class="wrap-lg">Additional Details</span><span class="wrap-sm">(anything else you know)</span>
      <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's additional details."></textarea>
    </label>

    <fieldset>
      <legend>Type of Appraisal</legend>
      <input type="checkbox" name="app-type" value="Insurance" />Insurance
      <input type="checkbox" name="app-type" value="Donation" />Donation
      <input type="checkbox" name="app-type" value="General Estate Planning" />General Estate Planning
    </fieldset>

    <div class="centred-button">
      <input type="submit" value="" class="submit-button" />
    </div>
  </form>
</div>

Aligning/styling checkboxes with rest of form

2 Answers2