Html 什么是适合输入文本宽度的理想解决方案?
我有一个简短的例子: 代码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"&
<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吗?