Html 什么是适合输入文本宽度的理想解决方案?

Html 什么是适合输入文本宽度的理想解决方案?,html,css,Html,Css,我有一个简短的例子: 代码HTML: <div class="select-style6"> <select name="emailtemplate" onchange="uploadtemplatecode(this.value);"> <option value="0">Choose an email template</option> <option value="2"&

我有一个简短的例子:

代码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>
.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;
}
正如你所看到的,文本太长,看起来很难看。 我想做的是添加下面的文本,这样它看起来只会很难看

你能告诉我哪种方法最好吗


提前谢谢

增加此类的宽度以使文本正确匹配:

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

不想增加输入的宽度。。。必须和现在完全一样有另一个解决方案吗?我不认为你可以有一个只有html/css的多行选项。。您可以使用javascript/jQuery吗?