Question

我有这个简短的样本：

代码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

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

{}

See it here

在我的输入中适合文本宽度的理想解决方案是什么？

1 个答案: