Menulist of select element

Menulist of select element
0

#1

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


#3

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


#4

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.


#5

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


#6

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


#7

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.


#8

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


#9

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


#10

Sorry, I don’t have.


#11

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