How to make datalist the same width as input html

Question

Hi I was wondering how to give a datalist and the corresponding input the same width. I tried the following :

input {
   width: 100%; 
   padding: 12px 20px 12px 40px;
   border: 1px solid #ddd;
   margin-bottom: 12px;
  }
  datalist,option{
    width: 100%;
  }

<input list="myList"/>
<datalist id="myList">
 <option> This is a great option</option>
</datalist>

The datalist is not the input width when I use the code above. Does anyone know how to make a datalist with the same length as the input he belongs to. Thanks in advance.

Angry Scotsman · Accepted Answer · 2022-02-14 18:26:55Z

-1

You could try something like this. Assign a class to each and style with CSS.

CSS

.input {
       width: 100%; 
       padding: 12px 20px 12px 40px;
       border: 1px solid #ddd;
       margin-bottom: 12px;
      }

.Option {
   width: 100%;
}

HTML

<input list="myList"/>
<datalist id="myList">
 <option class="Option"> This is a great option</option>
</datalist>

It might give you the desired outcome.

answered Feb 14, 2022 at 18:26

Angry Scotsman

57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rob Moll Over a year ago

There is no element with a class of .input.

Jip Helsen Over a year ago

Tried it doesn't work unfortunately but your comment is useful sometimes.

Collectives™ on Stack Overflow

How to make datalist the same width as input html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related