Select/Dropdownフォームフィールドの高さを動的に調整しますか？

Question

私たち皆が知っているように、フォームは、特に選択メニューのように、スタイルが悪いほど面倒です。私はすでに問題を抱えているビルドに特に面倒な形を与えられています。

私は選択フィールドの幅よりも長い複数のオプションを持つ選択ドロップダウンフィールドを持っています。これらのオプションのいずれかを選択すると、選択ボックスが調整され、テキストが折り返され、選択フィールドの高さがこのテキストに合わせて変更されるように設計されています。しかし、デフォルトでは、選択フィールドは同じ高さのままであり、特定のポイントでテキストを切り捨てます。ラップするテキストと、テキストに合わせて調整する選択フィールドの高さが必要です。

ここでは、デザイナーがこれがどのように見えるかについて私が提供したデザインがあります。

これは、メニューのデフォルトのオプションです：

そして、このオプションが選択されているとき、それがどのように見えるべきかである - 彼らは色があまりにも変更したい、ちょうど生活を作るためにさらに困難：

私のコードは、これまでのようになります - 私はあなたのアイデアを与えるために380pxに接触形式のIDを設定しました誰もがこれが起こる作る方法を知ってい

#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とWebを一般的に検索しましたが、私が後にしているものと全く同じ解決策は見つかりませんでした。私はCSS、Javascript、jQuery、またはプラグインを使用してうれしいですが、これが可能かどうかわかりません。

ご協力いただければ幸いです。

Answer 1

は、これは完璧な権利ではないのですが、私は選択のためのテキストをラップシミュレートする方法を見つけました。アイデアは、テキストを選択入力からクローン化するdivを作成し、「プレラップ」でスタイルを設定し、実際の選択入力にテキストとスタイリングを隠しながら、選択入力上に絶対配置でオーバーレイすることができます。

私は以下のスニペットで何を意味しているのかを見ることができます。私はドロップダウン要素の配置に取り組む必要があるので、まだいくつかの作業が必要ですが、これは私が望んだものです。

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