Menulist of select element

HTML-CSS
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.

1 Like
5

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

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.

1 Like
8

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

10

Sorry, I don’t have.

11

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

12

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.