CODEWITHSUNDEEP
htmlcss
Jon Nicholson
Jon Nicholson

Reputation: 1131

Why is my select input not increasing in size?

I've added a 'Select' HTML element to my form, but can't increase the size of it. What am I doing wrong?

.contact-modal-form {
  height: 55%;
  width: 60%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.contact-modal-form input {
  background-color: #dddddd;
  padding: 5px;
}

.contact-modal-form select {
  background-color: #dddddd;
  height: 20px;
}
<div class="contact-modal">
  <div class="contact-modal-separator">
    <p> ~ Contact Me ~ </p>
  </div>
  <div class="contact-modal-title">
    <h3>Take the first steps towards building a better future.</h3>
  </div>
  <div class="contact-modal-form">
    <h5>Your Name</h5>
    <input class="contact-modal-input" type="text" name="" value="">
    <h5>Your Email</h5>
    <input class="contact-modal-input" type="text" name="" value="">
    <h5>Your Current Website</h5>
    <input class="contact-modal-input" type="text" name="" value="">
    <h5>Your Budget</h5>
    <select class="contact-modal-input" name="">
      <option value="">~ £1000</option>
      <option value="">
        < £2000</option>
          <option value="">
            < £3000</option>
              <option value="">> £3000</option>
    </select>
  </div>
  <div class="contact-button">
    <button type="button" name="button">Submit</button>
  </div>
</div>

I've tried changing the height, padding, line-height - all sorts. But it's simply not having it. It feels like it should be straightforward but can't figure it out.

Any quick pointers? Thanks!

Upvotes: 1

Views: 939

Answers (6)

Justin Liu
Justin Liu

Reputation: 621

The padding won't matter in this case. You need to set the width property instead.

.contact-modal-form {
  height: 55%;
  width: 60%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.contact-modal-form input {
  background-color: #dddddd;
  padding: 5px;
}

.contact-modal-form select {
  background-color: #dddddd;
  height: 20px;
  width: 100px;
}
<div class="contact-modal">
  <div class="contact-modal-separator">
    <p> ~ Contact Me ~ </p>
  </div>
  <div class="contact-modal-title">
    <h3>Take the first steps towards building a better future.</h3>
  </div>
  <div class="contact-modal-form">
    <h5>Your Name</h5>
    <input class="contact-modal-input" type="text" name="name" value>
    <h5>Your Email</h5>
    <input class="contact-modal-input" type="text" name="email" value>
    <h5>Your Current Website</h5>
    <input class="contact-modal-input" type="text" name="website" value>
    <h5>Your Budget</h5>
    <select class="contact-modal-input" name="">
      <option value="">~ £1000 </option>
      <option value="< £2000"> < £2000 </option>
      <option value=""> < £3000 </option>
      <option value="">> £3000 </option>
    </select>
    <br />
  </div>
  <div class="contact-button">
    <button type="button" name="button">Submit</button>
  </div>
</div>

Upvotes: 0

mkavici
mkavici

Reputation: 317

.contact-modal-form select {
  background-color: #dddddd;
  height: 30px !important;
}

height: 30px !important; may fix it. There may other height rules overriding it so !important is required.

Upvotes: 1

gnorman
gnorman

Reputation: 163

Here is a sample of working CSS to style a select box:

input[type=text], select {
    padding: 6px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #5c5c5c;
    border-radius: 4px;
    box-sizing: border-box;
    max-width:60%;
    height: 48px;
    font-size: 24;
}

Select boxes are one of those things that render differently from browser to browser so you may have to add some browser specific styles.

Upvotes: 0

Abhisar Tripathi
Abhisar Tripathi

Reputation: 1659

You need to move height: 20px from .contact-modal-form select into .contact-modal-form input. It's a one line change. 

.contact-modal-form {
  height: 55%;
  width: 60%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.contact-modal-form input {
  background-color: #dddddd;
  padding: 5px;
  height: 20px;
}

.contact-modal-form select {
  background-color: #dddddd;
}
<div class="contact-modal">
  <div class="contact-modal-separator">
    <p> ~ Contact Me ~ </p>
  </div>
  <div class="contact-modal-title">
    <h3>Take the first steps towards building a better future.</h3>
  </div>
  <div class="contact-modal-form">
    <h5>Your Name</h5>
    <input class="contact-modal-input" type="text" name="" value="">
    <h5>Your Email</h5>
    <input class="contact-modal-input" type="text" name="" value="">
    <h5>Your Current Website</h5>
    <input class="contact-modal-input" type="text" name="" value="">
    <h5>Your Budget</h5>
    <select class="contact-modal-form" name="">
      <option value="">~ £1000</option>
      <option value="">< £2000</option>
      <option value="">< £3000</option>
      <option value="">> £3000</option>
    </select>
  </div>
  <div class="contact-button">
    <button type="button" name="button">Submit</button>
  </div>
</div>

Upvotes: 0

Adeel Tahir
Adeel Tahir

Reputation: 203

You can apply padding, height etc to Select element, try adding class and use the class selector and apply padding, height etc.

Upvotes: 0

sauhardnc
sauhardnc

Reputation: 1961

I have created a demo of it, see if it helps. 

.contact-modal-form {
  height: 55%;
  width: 60%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.contact-modal-form input {
  background-color: #dddddd;
  padding: 5px;
}

.contact-modal-form select {
  background-color: #dddddd;
  height: 20px;
  width: 100%;
}
<div class="contact-modal">
  <div class="contact-modal-separator">
    <p> ~ Contact Me ~ </p>
  </div>
  <div class="contact-modal-title">
    <h3>Take the first steps towards building a better future.</h3>
  </div>
  <div class="contact-modal-form">
    <h5>Your Name</h5>
    <input class="contact-modal-input" type="text" name="" value="">
    <h5>Your Email</h5>
    <input class="contact-modal-input" type="text" name="" value="">
    <h5>Your Current Website</h5>
    <input class="contact-modal-input" type="text" name="" value="">
    <h5>Your Budget</h5>
    <select class="contact-modal-form" name="">
      <option value="">~ £1000</option>
      <option value="">< £2000</option>
      <option value="">< £3000</option>
      <option value="">> £3000</option>
    </select>
  </div>
  <div class="contact-button">
    <button type="button" name="button">Submit</button>
  </div>
</div>

Upvotes: 0

Related Questions