Menulist of select element

Menulist of select element
0

Can we style the menulist that apearing when we click on a select element? Change the color, duration of apearing , effect, animation v…v with CSS

Here is index.html

<div class="box">
    <form>
          <p>Which Dog you love?</p>
       <select name="Dog type" id="dropdown">
       <option value="husky">Huskey</option>
       <option value="pug">Pug</option>
       <option value="bull">Bull</option>
       <option value="labrador">Labrador</option>
       </select>
       </form>
 </div>

Here is style.css:

.box {
	position: absolute;	
	width: 100%;
	max-width: 500px;
	padding: 50px;
	display: inline-block;
}
select {
    background-color: rgb(248, 248, 248);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(166, 166, 166);
    border-image: initial;
	width: 300px;
	font-size: 16px;
    -webkit-appearance: none;	
	height: 25px;
}
select::selection option {
    -webkit-transition: opacity 0.4s ease-in-out	
	transition: opacity 0.4s ease-in-out
}

#dropdown {
	animation-name: hienhinh;
	animation-duration: 2s;
}
@keyframes hienhinh {
	0% {
		opacity: 0;
	}
	50% {
	    opacity: 0.5;
}
	100% {
		opacity: 1;
	}
}
option {
		width: 100px;
}


I’m trying to animation the menulist but It just affect for the select box

If you wish to change the color or background-color of option elements, you can do that but i am not sure about animation though.

1 Like

Thank you for your answer. I searched for google all day but don’t find anything

What kind of animation are you trying to apply to the menulist? Can you describe how you want the animation to work?

Styling form elements is a very common web design need, I’m not sure how you couldn’t find anything. For form elements, you can alter colour, borders, box-shadows and a few other things. You can’t change how the animation/duration etc work, not for select elements. You can style HTML/CSS/JS in such a way that it works like a select element, but it is made deliberately hard to style an actual select element because it has to work consistently.

1 Like

I was asked for animate it likes the select component of the Material Angular but not using that framework.

Do you have an example of another site using something like you are wanting to do?

1 Like

Sorry, I don’t have.

Do you think It just a nonsense challenge? And just can’t do that

Styling form elements is common as @DanCouper said, but is a really tedious task, (thinking about multi-browser support or behavior, etc). What I’ve done in my short experience is creating through html/css/js a select-like component that takes the values of the native select and display them in the structure you made, that way you’ll make a component that not only looks the same in all browsers, but behaves the same way too.