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 Online Registration Form

Posted by jeannieduen
.a{fill-rule:evenodd;}techdegree
jeannieduen
Front End Web Development Techdegree Student 8,709 Points

Need help formatting an option text, that is within a select tag. I would like there to be a space in the "state"option

Hi there, I am having trouble formatting an option text, that is within a select tag. I would like there to be a space in the "state" option in my code below. When I try to give the option a padding left, nothing happens. Please let me know what you think. Thank you very much.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Form</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header class="header">THE CODE REVIEW</header>
<div class="topbar">
    <br>
    <h1 class="title">Signup for our newsletter</h1>
    <p>Get the latest news on how your code is doing right in your inbox.</p>
    <br>
    <hr size="7">
    <hr size="3">
</div>
<div class="formbox">
    <br>
    <h1 class="title aligntextleft">
        Contact Information</h1>
    <form>
    <fieldset>
     <label>Full Name</label>
      <input type="text" name="fullname"><br>
      <label>Email Address</label>
      <input type="text" name="emailaddress">
      <label>Phone Number</label>
      <input type="text" name="phonenumber">
      <label>Street Address</label>
      <input type="text" name="address">
      <label>City</label>
      <input type="text" name="city">
      <label>State</label>
        <select>
            <option value="Choose State" selected>Choose State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
        </select>   
      <label>Zip Code</label>
      <input type="text" name="zipcode" class="zipcode">
      </fieldset>
    </form>

</div>
</body>
</html>

body        {
            margin: 0 auto;
            width: 100%;
            }
label , p   {
            color: #797A7D; 
            padding-top: 20px;
            padding-bottom: 20px;
            display: block;
            }
.header     {
            background-color: #2E384C;
            color: white;
            text-align: center;
            font-size: 1.5em;
            padding: 5%;
            }
.topbar     {
            text-align: center;
            width: 85%;
            margin: auto;
            }
.topbar p   {
            width: 70%;
            margin: 0 auto;
            }
.title      {
            color: #2E384C;
            font-size: 150%;
            }
.aligntextleft{
            text-align: left;   
            }           
hr          {
            background-color: #2E384C;
            margin: 0.4%;
            }
fieldset    {
            border: none;
            }
form        {
            margin: auto;
            width: 100%;
            }
.formbox    {
            color: #727272;
            font-size: 120%;
            display: block;
            margin: 0 auto;
            width: 85%;
            }
form p      {
            text-align: left;
            }
.formbox fieldset input{
            display: block;
            width: 100%;

            margin: auto;
            border: 0;
            background-color: #E2E2E2;
            font-size: 110%;
            color: gray;
            }
input       {
            width:100%;
            height: 50px;
            }

.formbox .zipcode   {
            width: 50%;
            margin-left: 0;
            }
select      {
            width:100%;
            height: 50px;
            font-size: 110%;
            color: gray;
            border: 0;
            background-color: #E2E2E2;
            }
option      {
            padding-left: 30px;
            }

2 Answers

jeannieduen
seal-mask
.a{fill-rule:evenodd;}techdegree
jeannieduen
Front End Web Development Techdegree Student 8,709 Points
jeannieduen
.a{fill-rule:evenodd;}techdegree
jeannieduen
Front End Web Development Techdegree Student 8,709 Points

Thank you Brian!