Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Savannah Lynn
Savannah Lynn
13,662 Points
Posted by Savannah Lynn
Savannah Lynn
13,662 Points

Help aligning form input with label, styling form checkboxes

Hello,

I am working on a project that consists of writing the html and css for a multi-part form. I am having trouble with two parts.

1) How do I align a form input box with its corresponding label on the same line? It is not responding to typical inline-block or float tricks.

2) How do I select the checkboxes to be styled in CSS? Particularly, I want to style a checkbox when it is focused on or selected by the user.

Here is my HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Project 3</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:300,700" rel="stylesheet">
</head>
<body>
    <header>
        <h1>THE CODE REVIEW</h1>
    </header>
    <div id="wrapper">

        <h2>Signup for our newsletter</h2>
        <h3>Get the latest news on how your code is doing right in your inbox</h3>

        <hr class="thick">
        <hr class="thin">

        <form>      
            <fieldset class="contact">
                <legend><h2>Contact Information</h2></legend>
                <label for="name">Full Name</label>
                <input type="text" name="name" id="name" placeholder="Required" required>
                <br>
                <label for="email">Email Address</label>
                <input type="email" name="email" id="email" placeholder="Required" required>
                <br>
                <label for="number">Phone Number</label>
                <input type="tel" name="number" id="number" placeholder="Optional">
                <br>
                <label for="street">Street Address</label>
                <input type="text" name="street" id="street">
                <br>
                <label for="city">City</label>
                <input type="text" name="city" id="city">
                <br>
                <label for="state">State</label>
                <select name="state" id="state">
                    <option value="" disabled selected>Choose State</option>
                    <option>Alabama</option>
                    <option>Alaska</option> 
                    <option>Arizona</option>
                    <option>Arkansas</option>
                    <option>California</option>
                    <option>Colorado</option>
                    <option>Connecticut</option>
                    <option>Delaware</option> 
                    <option>Florida</option>
                    <option>Georgia</option> 
                    <option>Hawaii</option> 
                    <option>Idaho</option> 
                    <option>Illinois</option>
                    <option>Indiana</option> 
                    <option>Iowa</option> 
                    <option>Kansas</option> 
                    <option>Kentucky</option> 
                    <option>Louisiana</option> 
                    <option>Maine</option> 
                    <option>Maryland</option> 
                    <option>Massachusetts</option> 
                    <option>Michigan</option> 
                    <option>Minnesota</option> 
                    <option>Mississippi</option> 
                    <option>Missouri</option>
                    <option>Montana</option>
                    <option>Nebraska</option> 
                    <option>Nevada</option> 
                    <option>New Hampshire</option> 
                    <option>New Jersey</option> 
                    <option>New Mexico</option> 
                    <option>New York</option> 
                    <option>North Carolina</option> 
                    <option>North Dakota</option> 
                    <option>Ohio</option> 
                    <option>Oklahoma</option> 
                    <option>Oregon</option> 
                    <option>Pennsylvania</option>
                    <option>Rhode Island</option> 
                    <option>South Carolina</option> 
                    <option>South Dakota</option> 
                    <option>Tennessee</option> 
                    <option>Texas</option> 
                    <option>Utah</option>
                    <option>Vermont</option> 
                    <option>Virginia</option> 
                    <option>Washington</option> 
                    <option>West Virginia</option> 
                    <option>Wisconsin</option> 
                    <option>Wyoming</option>
                </select>
                <br>
                <label for="zip">Zip Code</label>
                <input type="text" name="zip" id="zip">

            </fieldset>

        <hr class="thin">

            <fieldset class="news">
                <legend><h2>Newsletter</h2></legend>
                <h4>Select the newsletters you would like to receive</h4>

                <label for="ch1"><input type="checkbox" id="ch1" name="ch1" checked>HTML NEWS</label>

                <label for="ch2"><input type="checkbox" id="ch2" name="ch2">CSS NEWS</label>

                <label for="ch3"><input type="checkbox" id="ch3" name="ch3">JAVASCRIPT NEWS</label>

                <h4>Newletter Format</h4>

                <label for="html"><input type="radio" id="html" name="html" checked>HTML</label>

                <label for="plain"><input type="radio" id="plain" name="plain">Plain Text</label>
                <br>

                <label for="other">Other topics you'd like to hear about</label>
                <textarea id="other" name="other"></textarea>

                <button type="submit">Sign Up</button>

            </fieldset>
        </form>

        <footer><h4>Copyright The Code Review</h4></footer>
    </div>
</body>

</html>

Here is my CSS:

/*~~~~~~~~~~~~~~~~
    HEADER
~~~~~~~~~~~~~~~~~*/
header {
    background: #2d3945;
    color: white;
    font-family:'Merriweather', sans-serif;
    font-size:.75em;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

h2 {
    font-family: 'Merriweather';
    color: #2d3945;
    text-align: center;
    padding-top:20px;
    padding-bottom: 20px;
}

h3 {
    font-family: 'Merriweather';
    font-weight: 300;
    color: #929597;
    text-align: center;
    padding: 0 10px 10px;

}

.thick {
    height: 5px;
    background: #2d3945;
    margin: 0 20px;
}

.thin {
    height:2px;
    background: #2d3945;
    margin: 3px 20px 30px;
}

/*~~~~~~~~~~~~~~~~
    CONTACT
~~~~~~~~~~~~~~~~~*/

fieldset {
    border: 0;
}


.contact label, .contact input {
    display: block;
}

label {
    font-family:'Merriweather', sans-serif;
    color: #687583;
    padding-bottom:12px;
}

input, select {
    background: #eff0f1;
    border: 0;
    height: 50px;
    min-width: 100%;
    margin-bottom: 10px;
    border-radius:10px;
}

select {
    margin-bottom: 30px;
}

input[placeholder]{
    font-family: 'Merriweather', sans-serif;
    font-size: .75em;
}


input:focus, select:focus, textarea:focus {
    border: 2px solid #2d3945;
    outline: none;
}


h4 {
    font-family: 'Merriweather', sans-serif;
    font-weight: 300;
    color: #929597;
    margin-top: -10px;
    line-height: 1.5;
}

/*~~~~~~~~~~~~~~~~
    NEWSLETTER
~~~~~~~~~~~~~~~~~*/

.news h4 {
    color: #687583;
    margin-top: 30px;
}

textarea, button {
    display: block;
}

label[for="other"] {
    margin-top:50px;
    display: block;
}

textarea {
    background: #eff0f1;
    border: 0;
    height: 120px;
    width: 100%;
    margin-right:10px;
    margin-bottom: 10px;
    border-radius:10px;
}

button {
    border: none;
    font-family:'Merriweather';
    font-size:1.25em;
    color: white;
    background: #4ebbb5;
    width: 100%;
    height: 60px;
    margin-top: 30px;
    border-radius:10px;
}


footer h4 {
    font-style: italic;
    margin: 20px 20px;
    text-align: center;
}

.contact, .news {
    padding: 20px;
}
/*~~~~~~~~~~~~~~~~
    MEDIA QUERIES
~~~~~~~~~~~~~~~~~*/



@media only screen and (min-width:767px) {

    #wrapper {
        max-width: 50%;
        margin: auto;
    }
}

I would love to post a screenshot of my work and the goal of the project, however I am not sure how to post a picture in this help window.

Thanks!

Moderator edited: markdown was added to the question to properly render the code. Please see the Markdown Cheatsheet link at the bottom of the "Add an Answer" section for tips on how to post code to the Community.

1 Answer

Jason Milfred
Jason Milfred
5,968 Points
Jason Milfred
Jason Milfred
5,968 Points

I believe the label and input elements default to display inline. You have both set to block and the min-width of the input set to 100%. I know that styling checkboxes is not easy, so I think someone wiser than I am will have to answer that.