Динамически настраивать высоту поля выбора/раскрывающегося списка?

Question

Как мы все знаем, формы, как известно, хлопотно относятся к стилю, особенно к избранным меню. Мне была особенно сложна форма, с которой я столкнулся.

У меня есть поле выпадающего списка с несколькими параметрами, длина которых больше ширины поля выбора. Он был спроектирован так, что, когда выбран один из этих параметров, поле выбора будет настраиваться так, чтобы текст обернулся, а высота поля выбора изменилась, чтобы соответствовать этому тексту. Но по умолчанию поле выбора останется той же самой высоты и отрежет текст в определенную точку. Мне нужен текст для обертывания и высота поля выбора, чтобы он соответствовал тексту.

Вот проекты, которые мне предоставили, как дизайнеры надеются, что это будет выглядеть.

Это опция по умолчанию в меню:

И вот как это следует взгляд, если выбран вариант - они хотят, чтобы цвет тоже изменится, просто чтобы сделать жизнь еще сложнее:

Мой код до сих пор выглядит следующим образом - я установить контакт-форму идентификатор 380px, чтобы дать вам представление о том ширины Я работаю на:

#contact-form { 
 
\t background:#282828; 
 
\t padding:80px 0 250px; 
 
    width:380px; 
 
} 
 

 
#contact-form select { 
 
\t width:100%; 
 
\t height:auto; 
 
    color:#fff; 
 
    font-size:16px; 
 
\t background:none; 
 
\t border-top:none; 
 
\t border-left:none; 
 
\t border-right:none; 
 
\t border-bottom:2px solid #fff; 
 
\t padding:10px 10px 10px 20px; 
 
    overflow:hidden; 
 
\t outline:none; 
 
    white-space:pre; 
 
    text-overflow:ellipsis; 
 
    \t -webkit-appearance: none; 
 
     -moz-appearance: none; 
 
      appearance: none; 
 
} 
 

 
#contact-form select * { 
 
\t border-radius:0; 
 
\t background-color: #282828; 
 
\t padding:20px; 
 
} 
 

 
#contact-form select::-ms-expand { /* for IE 11 */ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="containter-fluid" id="contact-form"> 
 
     \t <div class="container"> 
 
     \t \t <form> 
 
      \t <div class="col-md-4"> 
 
       \t <select> 
 
        \t <option value="default" selected>Enquiry Type</option> 
 
         <option value="brief">I have a brief and want to discuss it</option> 
 
         <option value="workFL">I don't have the right brief right now but I want to work with you</option> 
 
         <option value="industryprof">I'm an industry professional looking for a job</option> 
 
         <option value="tryingtoflogussomething">I don't need a design agency, I want to sell you something</option> 
 
         <option value="none">None of the above, it's a general enquiry</option> 
 
        </select> 
 
       </div> 
 
       <div class="col-md-8"> 
 
       \t 
 
       </div> 
 
      </form> 
 
     </div> 
 
     </section>

Кто-нибудь знает способ сделать это произошло? Я обыскал Stackoverflow и в сети вообще, но не нашел решения, которое вполне соответствует тому, что мне нужно. Я рад использовать CSS, Javascript, jQuery или плагин, но я не знаю, возможно ли это вообще?

Любая помощь будет оценена по достоинству.

Answer 1

Это не идеально правильно, но я нашел способ имитации упаковки текст для избранных. Идея состоит в том, чтобы создать div, где текст будет клонирован из ввода select и может быть в стиле с «предварительным оберткой» и наложить это с абсолютным позиционированием над выбранным входом, при этом скрывая текст и стиль на фактическом входе выбора ,

Вы можете видеть, что я имею в виду в приведенном ниже фрагменте. Это все еще требует некоторой работы, поскольку мне нужно работать над позиционированием элемента drop down, но это в значительной степени то, что я хотел.

\t \t $(document).ready(function() { \t \t \t 
 
      $('.viewport').text($("option:selected", this).text()); 
 
      $('#enquiry').change(function() { 
 
       $('.viewport').text($("option:selected", this).text()); 
 
      });    
 
     });

#contact-form { 
 
\t background:#282828; 
 
\t padding:80px 0 140px; 
 
    width:320px; 
 
} 
 

 
#contact-form select#enquiry, 
 
#contact-form .select-wrapper { 
 
\t width: 100%; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 

 
#contact-form .select-wrapper { 
 
\t color:#fff; \t 
 
} 
 

 
#contact-form .select-wrapper:after { 
 
\t font-family: 'Glyphicons Halflings'; 
 
\t content:"\e259"; 
 
\t position:absolute; 
 
\t font-size:20px; 
 
\t color:inherit; 
 
\t top:10px; 
 
\t right:20px; \t 
 
\t z-index:0; 
 
} 
 

 
#contact-form select#enquiry { 
 
\t width:100%; 
 
\t height:46px; 
 
\t display:block; 
 
\t color: transparent; 
 
    background: none; 
 
\t border:none; 
 
\t outline:none; 
 
    \t -webkit-appearance: none; 
 
     -moz-appearance: none; 
 
      appearance: none; 
 
} 
 

 
#contact-form option { 
 
\t color:#fff; \t 
 
} 
 

 
#contact-form .viewport { 
 
\t width:80%; 
 
\t font-size:20px; 
 
\t line-height:24px; 
 
\t background:none; 
 
\t border-top:none; 
 
\t border-left:none; 
 
\t border-right:none; 
 
\t border-bottom:2px solid #fff; 
 
\t padding:10px 80px 10px 20px; 
 
\t position:absolute; 
 
\t text-align:left; 
 
    overflow: hidden; 
 
    white-space: pre-wrap; 
 
    text-overflow: ellipsis; 
 
\t z-index:1; 
 
} 
 

 
#contact-form select * { 
 
\t border-radius:0; 
 
\t background-color: #282828; 
 
} 
 

 
#contact-form select::-ms-expand { /* for IE 11 */ 
 
    display: none; 
 
} 
 

 
#contact-form input { 
 
\t width:100%; 
 
\t font-size:20px; 
 
\t line-height:24px; 
 
\t color:#ffa200; 
 
\t background:none; 
 
\t border-top:none; 
 
\t border-left:none; 
 
\t border-right:none; 
 
\t margin-bottom:60px; 
 
\t border-bottom:2px solid #fff; 
 
\t padding:10px 10px 10px 20px; 
 
    overflow:hidden; 
 
\t outline:none; 
 
} 
 

 
#contact-form ::-webkit-input-placeholder { 
 
    color: #ffffff; 
 
} 
 

 
#contact-form :-moz-placeholder { /* Firefox 18- */ 
 
    color: #ffffff; 
 
} 
 

 
#contact-form ::-moz-placeholder { /* Firefox 19+ */ 
 
    color: #ffffff; 
 
} 
 

 
#contact-form :-ms-input-placeholder { 
 
    color: #ffffff; 
 
} 
 

 
#contact-form textarea { 
 
\t width:100%; 
 
\t height:50px; 
 
\t color:#ffa200; 
 
\t background:none; 
 
\t border-top:none; 
 
\t border-left:none; 
 
\t border-right:none; 
 
\t margin-bottom:60px; 
 
\t border-bottom:2px solid #fff; 
 
\t padding:10px 10px 10px 20px; 
 
    overflow:hidden; 
 
\t outline:none; 
 
} 
 

 
#contact-form > div { 
 
\t text-align:center; \t 
 
} 
 

 
#contact-form .btn { 
 
\t font-family:'Franklin Gothic Heavy'; 
 
\t font-size:16px; 
 
\t text-transform:uppercase; 
 
\t letter-spacing:1px; 
 
\t color:#fff; 
 
\t background:#282828; 
 
\t border:2px solid #fff; 
 
\t border-radius:0; 
 
\t margin:10px auto 60px; 
 
\t padding:7px 50px; 
 
\t display:inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="containter-fluid" id="contact-form"> 
 
     \t <div class="container"> 
 
     \t \t <form> 
 
      \t <div class="col-md-4"> 
 
       \t <div class="select-wrapper"> 
 
        \t <div class="viewport"></div> 
 
         <select id="enquiry"> 
 
          <option value="default">Enquiry Type</option> 
 
          <option value="brief">I have a brief and want to discuss it</option> 
 
          <option value="workFL">I don't have the right brief right now but I want to work with Fourleaf</option> 
 
          <option value="industryprof">I'm an industry professional looking for a job</option> 
 
          <option value="tryingtoflogussomething">I don't need a design agency, I want to sell you something</option> 
 
          <option value="general_enquiry">None of the above, it's a general enquiry</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-8"> 
 
       \t 
 
       </div> 
 
      </form> 
 
     </div> 
 
     </section>

Answer 2

Добавьте это в CSS:

option{ 
    width: 100%; 
}