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

HTML HTML Forms Choosing Options Select Menus

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Posted by Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Select menu width issue

I am working on a form for a project and for some reason I am unable to keep the width of my select box in proportion to my text input boxes once the screen goes beyond about 969px (I am using the mobile first approach). Has anyone had a similar experience?

Thanks-

3 Answers

Joseph Zimmerman
Joseph Zimmerman
6,402 Points
Joseph Zimmerman
Joseph Zimmerman
6,402 Points

I believe you issue is with box sizing... but to be honest I had a hard time navigating your code to tell you the exact bit of code to fix your issue. A concept I'm still working on myself is DRY (don't repeat yourself) programming. I noticed a lot of overlapping code between the element and ID's. Try designating classes to use repeat styling of elements throughout your form.

However, when I comment out all your styling and apply the following the elements are equal as you were hoping for.

input, select { width: 70%; /* just to see that the elements are equal */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: blue; }

If I were you, I would remove the CSS and use the above box sizing property and use classes for the repeat styling through out the form. Remember to group multiple selectors that use the same styling declarations.

Hope this helps. Cheers, Joe

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Thanks Joseph. That works for the width of the select dropdown (yay!), but taking away all of the other CSS throws everything off (I have mockups that I am attempting to replicate). I am going to attempt to incorporate it into my code without deleting everything else. Thanks so much!

Joseph Zimmerman
Joseph Zimmerman
6,402 Points
Joseph Zimmerman
Joseph Zimmerman
6,402 Points

Hi Juliette,

Can you please post code and screen shot?

Thanks.

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Hi Joseph,

OK. Here it is. Thanks!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>

        <link href="http://fonts.googleapis.com/css?family=Nunito:400,300" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="main.css">

        <script src="js/radio.js"></script>

    </head>
    <body>
       <header><h3>THE CODE REVIEW</h3></header>
      <section>
        <h3>Signup for our newsletter</h3>
        <p>Get the latest news on how your code is doing right in your inbox</p>

      </section>

        <form action="index.html" method="POST">
          <hr>
          <hr>
        <fieldset class="form" id="contact">
        <legend>Contact Information</legend>

        <label for="fullname">Full Name<br></label>
        <input type="text" id="fullname" name="fullname" placeholder="Required" required>
        <br>
        <label for="email">Email Address</label><br>
        <input type="email" id="email" name="email" placeholder="Required" required>
        <br>
        <label for="phonenumber">Phone Number</label><br>
        <input type="text" id="phonenumber" name="phonenumber">
        <br>
        <label for="address">Street Address</label><br>
        <input type="text" id="address" name="address">
        <br>
        <label for="city">City</label><br>
        <input type="text" id="city" name="city">
        <br>
        <label for="state">State</label><br>

        <select name="state" id="state">
          <option value="state">Choose State</option>
          <option value="AK">AK</option>
          <option value="AL">AL</option>
          <option value="AR">AR</option>
          <option value="AZ">AZ</option>
          <option value="CA">CA</option>
          <option value="CO">CO</option>
          <option value="CT">CT</option>
          <option value="DC">DC</option>
          <option value="DE">DE</option>
          <option value="FL">FL</option>
          <option value="GA">GA</option>
          <option value="HI">HI</option>
          <option value="IA">IA</option>
          <option value="ID">ID</option>
          <option value="IL">IL</option>
          <option value="IN">IN</option>
          <option value="KS">KS</option>
          <option value="KY">KY</option>
          <option value="LA">LA</option>
          <option value="MA">MA</option>
          <option value="MD">MD</option>
          <option value="ME">ME</option>
          <option value="MI">MI</option>
          <option value="MN">MN</option>
          <option value="MO">MO</option>
          <option value="MS">MS</option>
          <option value="MT">MT</option>
          <option value="NC">NC</option>
          <option value="ND">ND</option>
          <option value="NE">NE</option>
          <option value="NH">NH</option>
          <option value="NJ">NJ</option>
          <option value="NM">NM</option>
          <option value="NV">NV</option>
          <option value="NY">NY</option>
          <option value="OH">OH</option>
          <option value="OK">OK</option>
          <option value="OR">OR</option>
          <option value="PA">PA</option>
          <option value="RI">RI</option>
          <option value="SC">SC</option>
          <option value="SD">SD</option>
          <option value="TN">TN</option>
          <option value="TX">TX</option>
          <option value="UT">UT</option>
          <option value="VA">VA</option>
          <option value="VT">VT</option>
          <option value="WA">WA</option>
          <option value="WI">WI</option>
          <option value="WV">WV</option>
          <option value="WY">WY</option>
  </select>
        <br>
        <label for="zipcode">Zip Code</label><br>
        <input type="text" id="zipcode" name="zipcode"><br>

         <label for="language">Language</label><br>
        <select name="language" id="language">
          <option value="language">Favorite Language</option>
          <option value="HTML">HTML</option>
          <optgroup label="CSS">
            <option value="CSS3">CSS3</option>
            <option value="Sass">Sass</option>
            <option value="Bootstrap">Bootstrap</option>
          </optgroup>
          <optgroup label="Javascript">
            <option value="Javascript">Javascript</option>
            <option value="jQuery">jQuery</option>
            <option value="Angular">Angular</option>
            <option value="React">React</option>
          </optgroup>
          <optgroup label="Server side">
            <option value="PHP">PHP</option>
            <option value="MySQL">MySQL</option>
          </optgroup>

    </select>

      </fieldset>
        <br>

        <hr>
        <fieldset class="form" id="newsletter">
        <legend>Newsletter</legend>

        <p>Select the newsletters that you would like to receive</p>

        <input type="checkbox" id="html_news" value="html_news" name="html_news"><label for="html_news" class="light">HTML News</label><br>
        <input type="checkbox" id="css_news" value="css_news" name="css_news"><label for="css_news" class="light">CSS News</label><br>
        <input type="checkbox" id="javascript_news" value="javascript_news" name="javascript_news"><label for="javascript_news" class="light">Javascript News</label><br>

        <p>Newsletter format</p>

        <input type="radio" id="html" value="HTML" name="newsletter"><label for="html" class="light">HTML</label><br>
        <input type="radio" id="plain_text" value="plain_text" name="newsletter"><label for="plain_text" class="light">Plain text</label>

        <p> Other topics you'd like to hear about</p>

        <textarea rows="6" cols="42" name="comment">
        </textarea>
        <button type="submit">Sign Up</button>
      </fieldset>
      </form>


      <footer><p>Copyright The Code Review</p></footer>

    </body>
</html>

* {
  font-family: 'Merriweather', serif; }

body {
  margin: 0px;
  background-color: #a8423d; }

h3 {
  color: #ECDDBE; }

h4,
h5,
p {
  color: #ECDDBE; }

header {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-display: flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  background-color: #525564;
  /*box-shadow: 0 -3px 0 rgba(116, 130, 143, 0.8) inset;*/
  border-bottom: 5px solid #3b3d48;
  color: white;
  /* Doesn't work with Flex? height: calc(10vh + 10px);*/
  width: 100%;
  height: 90px;
  position: fixed;
  top: 0px; }

section {
  margin-top: 135px;
  margin-bottom: 25px;
  text-align: center;
  width: 95%;
  margin-left: 2.5%; }

form:nth-child(1) > h3:nth-child(1) {
  text-align: center;
  padding-top: 25px; }

section:nth-child(2) > p:nth-child(2) {
  text-align: center;
  margin-right: 1%;
  font-weight: lighter; }

body > form:nth-child(3) > hr:nth-child(1) {
  border: solid 1px #24252c;
  width: 90%; }

body > form:nth-child(3) > hr:nth-child(2) {
  border: solid 2px #525564;
  width: 90%;
  margin-bottom: 20px; }

fieldset {
  border: none; }

legend {
  color: #ECDDBE;
  font-weight: bold;
  margin-left: 2%;
  margin-bottom: 5%; }

legend:nth-child(1) {
  font-weight: bold;
  margin-left: 2%; }

label {
  color: #ECDDBE;
  font-weight: bold;
  margin-bottom: 20px;
  margin-left: 2%; }

input[type="text"],
input[type="email"],
textarea {
  border-radius: 3%;
  font-size: 16px;
  /*height: auto;*/
  margin: 15px 0px;
  outline: 0;
  padding: 15px;
  width: calc(100% - 10%);
  background-color: #ECDDBE;
  border: 4px solid #525564;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  text-align: left;
  /*margin-left: 2.5%; */ }

/* Style text in 1st two input fields*/
input[type="text"]:required,
input[type="email"]:required {
  text-align: right;
  font-style: italic;
  font-weight: 700;
  color: #a8423d; }

input[type="text"]:focus,
input[type="email"]:focus,
#state:focus,
#language:focus,
textarea:focus {
  border: 6px solid #5d2422;
  transition: all .4s ease-in-out;
  background-color: #C0C0C0; }

select {
  border-radius: 3%;
  font-size: 16px;
  height: 55px;
  margin-top: 15px;
  margin-bottom: 15px;
  /*outline: 0;*/
  padding: 15px;
  width: 100%;
  background-color: #ECDDBE;
  color: #a8423d;
  /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;*/
  border: 4px solid #525564;
  /*  margin-left: 5%;*/ }

#zipcode {
  width: 40%; }

/*Contact Information*/
h3:nth-child(5),
h5 {
  margin-left: 2%; }

h5,
p {
  font-weight: lighter; }

/*full name*/
h5:nth-child(6) {
  margin-bottom: 10px; }

h5 {
  margin-bottom: -2px; }

/*hr*/
form:nth-child(3) > hr:nth-child(5) {
  margin-top: 10px;
  margin-bottom: 30px;
  width: 90%;
  color: #525564; }

/*newsletter h3*/
form:nth-child(1) > h3:nth-child(34) {
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 2%; }

/*Newsletter down.....*/
form:nth-child(1) > p:nth-child(35),
form:nth-child(1) > p:nth-child(51),
input#html_news,
input#css_news,
input#javascript_news,
form:nth-child(1) > p:nth-child(45),
input#html,
input#plain_text {
  margin-left: 2%; }

/*checkboxes and radio buttons*/
input#html_news,
input#css_news,
input#javascript_news,
input#html,
input#plain_text {
  margin-bottom: 10px; }

/*input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label{
  font-weight: bold;
  font-size: 22px; }*/
#newsletter > p:nth-child(2),
#newsletter > p:nth-child(12),
#newsletter > p:nth-child(18) {
  margin-left: 2%;
  margin-bottom: 30px; }

label.light {
  /*  margin-left: 1%;*/
  color: beige; }

form:nth-child(1) > textarea.light {
  color: #4a4343; }

button {
  padding: 19px 39px 18px 39px;
  color: #FFF;
  background-color: #525564;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  border-radius: 5px;
  width: 100%;
  /*box-shadow: 0 -3px 0 rgba(143, 112, 127, 0.8) inset;*/
  border: 5px solid #3b3d48;
  margin-top: 18px;
  margin-bottom: 15px; }

footer {
  text-align: center;
  font-weight: lighter;
  font-size: 14px;
  font-style: italic;
  margin-bottom: 100px; }

/*MEDIA QUERY*/
@media (min-width: 760px) {
  section {
    margin-top: 125px; }

  section:nth-child(2) > p:nth-child(2) {
    margin-bottom: 30px; }

  form {
    width: 60%;
    margin: auto; }

  body > form:nth-child(3) > hr:nth-child(1),
  body > form:nth-child(3) > hr:nth-child(2),
  body > form:nth-child(3) > hr:nth-child(5) {
    width: 98%;
    text-align: center; }

  fieldset#contact.form {
    margin-top: 40px; }

  #newsletter > legend:nth-child(1) {
    margin-left: 0%; }

  legend,
  #contact > legend:nth-child(1) {
    margin-bottom: 30px;
    margin-top: 20px;
    margin-left: 0%;
    text-align: left; }

  label {
    margin-left: 0px;
    margin-bottom: -10px; }

  input[type="text"],
  input[type="email"] {
    width: 66%;
    /*float: right;*/
    margin-left: 28%;
    margin-top: -130px;
    margin-bottom: 35px;
    height: 30px; }

  /*select menus don't have a type attribute- Style by #ID instead*/
  /**
   * Known limitation: by default, Chrome and Safari on OS X allow very limited
   * styling of `select`, unless a `border` property is set.
   */
  #state {
    width: 75%;
    margin-left: 28%;
    margin-top: -130px;
    margin-bottom: 35px;
    height: 65px;
    border: 4px solid #525564; }

  #zipcode {
    width: 30%;
    margin-right: 175px;
    /*margin-top: -135px;*/
    margin-bottom: 35px;
    height: 30px;
    /*float:right;*/ }

  #language {
    margin-top: -50px;
    width: 75%;
    margin-left: 28%;
    height: 65px;
    border: 4px solid #525564; }

  hr:nth-child(5) {
    width: 96%;
    margin-left: 0%;
    margin-bottom: 20px; }

  #newsletter > p:nth-child(2) {
    margin-left: -2px; }

  form:nth-child(1) > p:nth-child(35),
  form:nth-child(1) > p:nth-child(51),
  input#html_news,
  input#css_news,
  input#javascript_news,
  form:nth-child(1) > p:nth-child(45),
  input#html,
  input#plain_text {
    margin-left: 0%; }

  #newsletter > p:nth-child(2),
  #newsletter > p:nth-child(12),
  #newsletter > p:nth-child(18) {
    margin-left: 0%; }

  label.light {
    padding-left: 7px; }

  textarea {
    width: 92%;
    margin-left: -1%;
    margin-top: 0px; }

  button {
    width: 100%;
    margin-left: -1%; }

  footer {
    margin-bottom: 150px; } }

/*# sourceMappingURL=main.css.map */

I took a screenshot, but now I am unable to locate it on my clipboard. Here is the link to my project on Github:

https://github.com/firebuggirl/formfortreehouse

Thanks!

Joseph Zimmerman
Joseph Zimmerman
6,402 Points
Joseph Zimmerman
Joseph Zimmerman
6,402 Points

Did a quick google and came across this same info so I think were on the right track.

Good Luck, Joe

http://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html-best-way-to-make-equal-width

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Thanks Joseph. I came across this article yesterday. The problem is that for my project the layout has to look one way in mobile view and another @ 720px +. I also have to get really specific with selectors in order to get the form to appear exactly like the two mockups that I have been given. Some things need to float more to the right, but then to the left depending on the size of the viewport, etc....It gets quite tedious...lol...That's why I have ended up with so much code. ..and everything has to be perfectly centered...

Update: In hindsight, I see what you're saying about repeating code. I am cleaning some of that up now and things are coming together quite nicely. The box-sizing is helping out with the inputs, select, textarea and button. Thanks again. Lesson learned:-)