Почему мой выборочный ввод не увеличивается в размере?

Question

Я добавил в свою форму элемент «Select» HTML, но не могу увеличить его размер. Что я делаю не так?

.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>

Я пробовал изменить высоту, отступ, высоту строки - все виды. Но его просто нет. Похоже, это должно быть просто, но не могу понять.

Есть какие-нибудь подсказки? Спасибо!

Answer 1

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

высота: 30 пикселей! Important; может это исправить. Могут быть другие правила высоты, которые отменяют его, поэтому требуется! Important.

Answer 2

Заполнение в этом случае не имеет значения. Вместо этого вам нужно установить свойство width.

.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>

Answer 3

Вот пример работы CSS для стилизации окна выбора:

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;
}

Окна выбора - это одна из тех вещей, которые отображаются по-разному от браузера к браузеру, поэтому вам, возможно, придется добавить некоторые особенности браузера c стили.

Answer 4

Вам нужно переместить height: 20px из .contact-modal-form select в .contact-modal-form input. Это изменение на одну строчку.

.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>

Answer 5

Вы можете применить заполнение, высоту и т.д. c к элементу Select, попробуйте добавить класс, использовать селектор классов и применить заполнение, высоту и т.д. c.

Answer 6

Я создал его демо, посмотрите, поможет ли.

.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>