Width setting in datalist html

Question

I am using datalist for searchable select, in the set width for input field,but in the options of datalist not getting the width of the input field, it take the width of the text length on the options, how can i set it same i am putting my codehear

input table {
    margin: 30px auto auto auto;
    border-collapse: inherit;
    width: auto;
    max-width: 100%;
    background: #EFEFEF;
    border-radius: 15px;
    font-size: 14px;
    font-family: inherit;
    font-weight: bold;
}
.input tbody {
    padding: 10px;
    margin: 30px;
    display: block;
    background: #d9e8de;
    border-radius: 30px;
}
.input tr:nth-child(even) {
    background-color: #d9e8de;
}
.input td {
    padding: 10px;
 height: auto;
}
.input input,.input select,.input textarea  {
    width: 250px;
    height:40px;
    padding: 5px;
    font-size: 14px;
    font: serif;
}

<div class="input"><form method="post"><table>
<tr><td>Client Name * </td><td colspan="3">
<input type="text" name="client" list="client" autofocus="autofocus" autocomplete="off" style="width: 100%;"><datalist id="client">
<option value="Name 1"></option>
<option value="Name 2"></option>
<option value="Name 3"></option></datalist></td></tr>
<tr><td>Data1</td><td><input type="text"></td><td>Data1</td><td><input type="text"></td></tr>
</table></form></div>

in this getting the width of option is not same the width of input field

I don’t think you can. The browser renders that list outside of the scope of what you have access to in terms of formatting. — 04FS, Feb 13 '19 at 12:05

Width setting in datalist html

0 Answers0