Unable to style dropdown-form? (HTML/CSS beginner)

[c0d0ps]

Hi I'm using a .html file

Languages: HTML, CSS
Level: Beginner

 

Problem:

Trying to style my dropdown-form yellow aka same as password

 

Problem.jpg

Spoiler

Correct.jpg

Spoiler

HTML

Spoiler

<label for="fname, lname">
Förnamn&Efternamn:
</label>
<br>
<input list="fname, lname">
<datalist id="fname, lname" name="fname, lname">
<option value="Simon SNIP"></option>
<option value="Magnus SNIP"></option>
</datalist>
<br>
<label for="pwd">
Lösenord:
</label>
<br>
<input type="password" id="pwd" name="pwd">
<br>
<input type="submit" value="Logga in">
<input type="reset">
<hr class="hr1">

 

CSS

Spoiler

input[type=list]{
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;}

input[type=password]{
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;}

[FliP0x]

Try to give the input list an ID that you can work with, for example:
 

<input list="fname, lname" id="inputlist">

Then you can define the ID inputlist in CSS and style it to your liking.

 

Try if this works:
 

inputlist{
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;}

 

[c0d0ps]

6 minutes ago, FliP0x said:

Try to give the input list an ID that you can work with, for example:
 

SNIP

Then you can define the ID inputlist in CSS and style it to your liking.

 

Try if this works:
 

SNIP

 

Hi, thanks for answer. This did not work.

 

HTML

Spoiler

<input list="fname, lname" id="inputlist">
<datalist id="fname, lname" name="fname, lname">
<option value="Simon SNIP"></option>
<option value="Magnus SNIP"></option>
</datalist>

CSS

Spoiler

.inputlist{
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;}

input[type=password]{
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;}

Fail.jpg

Spoiler

I'll try to use datalist id instead I suppose.

[FliP0x]

Did some research, the way it should work is like:

 

<input list="fname, lname" name="inputlist">

Instead of an ID, an input list wants a name.

 

CSS:
 

input[name="inputlist"]{
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;}

 

[c0d0ps]

2 minutes ago, FliP0x said:

Did some research, the way it should work is like:

 

SNIP

Instead of an ID, an input list wants a name.

 

CSS:
 

SNIP

 

I actually just found this out.
Thanks, this works great - It also works with ID!

 

CSS

Spoiler

input[id="inputlist"]{
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;}