什麼是適合我的輸入文本寬度的理想解決方案？

Question

我有這個簡短的樣本：

link

代碼HTML：

<div class="select-style6"> 
     <select name="emailtemplate" onchange="uploadtemplatecode(this.value);"> 
      <option value="0">Choose an email template</option> 
      <option value="2">Email sent to pacient exercise</option> 
      <option value="5">Email sent to patient account create</option> 
      <option value="8">created from repo</option> 
      <option value="9">Happy birthday</option> 
      <option value="10">template with image that really works</option> 
      <option value="11">Appointment Template</option> 
      <option value="12">Appointment Reminder</option> 
      <option value="13">Credit Card Expiration Reminder</option> 
      <option value="14">Credit Card Succesfull Charge</option> 
      <option value="15">Credit Card Payment Declined</option> 
      <option value="16">New practitioner Account</option> 
      <option value="17">New Patient Email</option> 
      <option value="18">New message to practitioner</option> 
      <option value="19">Referall Template</option> 
     </select> 
</div> 

CODE CSS：

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

正如你所看到的，文本太長長而且看起來很醜。 我想要做的是添加下面的文本，所以它只看起來很醜。

你能告訴我哪個是最好的方法嗎？

在此先感謝！

Answer 1

增強此類的寬度，使文本正確適合：

.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: 265px; /* that width change */ 
    height: 33px; 
} 

See it here