title: What is the ideal solution to fit the width of the text in my input?
body: <p>I have this short sample:</p>
  
  <p><a href="https://jsfiddle.net/jojrspo5/" rel="nofollow">link</a></p>
  
  <p><strong>CODE HTML:</strong></p>
  
  <pre><code>&lt;div class="select-style6"&gt;
          &lt;select name="emailtemplate" onchange="uploadtemplatecode(this.value);"&gt;
              &lt;option value="0"&gt;Choose an email template&lt;/option&gt;
              &lt;option value="2"&gt;Email sent to pacient exercise&lt;/option&gt;
              &lt;option value="5"&gt;Email sent to patient account create&lt;/option&gt;
              &lt;option value="8"&gt;created from repo&lt;/option&gt;
              &lt;option value="9"&gt;Happy birthday&lt;/option&gt;
              &lt;option value="10"&gt;template with image that really works&lt;/option&gt;
              &lt;option value="11"&gt;Appointment Template&lt;/option&gt;
              &lt;option value="12"&gt;Appointment Reminder&lt;/option&gt;
              &lt;option value="13"&gt;Credit Card Expiration Reminder&lt;/option&gt;
              &lt;option value="14"&gt;Credit Card Succesfull Charge&lt;/option&gt;
              &lt;option value="15"&gt;Credit Card Payment Declined&lt;/option&gt;
              &lt;option value="16"&gt;New practitioner Account&lt;/option&gt;
              &lt;option value="17"&gt;New Patient Email&lt;/option&gt;
              &lt;option value="18"&gt;New message to practitioner&lt;/option&gt;
              &lt;option value="19"&gt;Referall Template&lt;/option&gt;
          &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CODE CSS:</strong></p>
  
  <pre><code>.select-style6 {
      background-image: url("/public/images/arrow-field.png"), linear-gradient(to right, white 79%, white 70%, gray 71%, lightgray 71%, lightgray 100%);
      background-position: 149px center, center center;
      background-repeat: no-repeat;
      border: 1px solid #ccc;
      border-radius: 3px;
      margin: 0;
      overflow: hidden;
      padding: 0;
      width: 183px;
      height: 33px;
  }
  
  .select-style6 select {
      padding: 10px 8px;
      width: 100%;
      border: none;
      box-shadow: none;
      background-color: transparent;
      background-image: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 12px;
  }
  .select-style6 select:focus {
      outline: none;
  }
  </code></pre>
  
  <p>As you can see, the text is too long and comes looks ugly.
  What I want to do is add the text below so it only looks ugly.</p>
  
  <p>Can you please tell me which is the best way to do this?</p>
  
  <p>Thanks in advance!</p>