Custom Animated Select Box

Developer
Bottomline Interactive
Size
2,467 Kb
Views
26,312
  1. Custom Animated Select Box Previews
  2. Custom Animated Select Box HTML Codes
  3. Custom Animated Select Box CSS Codes
  4. Custom Animated Select Box JS Codes

How do I make an custom animated select box?

What is a custom animated select box? How do you make a custom animated select box? This script and codes were developed by Bottomline Interactive on 25 September 2022, Sunday.

Custom Animated Select Box Previews
IQ Test

Custom Animated Select Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Animated Select Box</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body{margin:30px; background-color: #232323; font-size: 18px; color: #7b7b7b; font-family: 'Oswald', cursive;}
select{padding:10px; margin: 0; width: 200px;}
#select{display:inline-block}
select { background-color: #474747; border-radius: 5px; border: 0 solid #000; overflow-x: hidden; overflow-y: auto;}
/*option:hover a {background-color: #ccc}*/
span{float:right;}
option:hover { color: red; background-color: orange;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="select"> <select size="1">
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option> <option><a href="#">Hover</a></option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<!--<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>
<option>Alfa</option>
<option>Béta</option>
<option>Gamma</option>-->
</select></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Animated Select Box - Script Codes CSS Codes

body{margin:30px; background-color: #232323; font-size: 18px; color: #7b7b7b; font-family: 'Oswald', cursive;}
select{padding:10px; margin: 0; width: 200px;}
#select{display:inline-block}
select { background-color: #474747; border-radius: 5px; border: 0 solid #000; overflow-x: hidden; overflow-y: auto;}
/*option:hover a {background-color: #ccc}*/
span{float:right;}
option:hover { color: red; background-color: orange;
}

Custom Animated Select Box - Script Codes JS Codes

function sincdec(){ if(($("select").attr("size"))==1){ var mi="inc"; var s=1; setInterval(function(){ if(s<10){ if($('#select').is(':hover') === true){ s++;$("select").attr("size",s); $("span").html(s); } } },10); } else if(($("select").attr("size"))==10){ var mi="dec"; var s=10; setInterval(function(){ if(s>1){ if($('#select').is(':hover') === false){ s--;$("select").attr("size",s); $("span").html(s); } } },10); }
};
$("select").hover(function(e){ sincdec();
});
Custom Animated Select Box - Script Codes
Custom Animated Select Box - Script Codes
Home Page Home
Developer Bottomline Interactive
Username BottomlineInteractive
Uploaded September 25, 2022
Rating 3
Size 2,467 Kb
Views 26,312
Do you need developer help for Custom Animated Select Box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bottomline Interactive (BottomlineInteractive) Script Codes
Name
Non-uniform Shaped CSS Hovers
Calculator
Glow hover input field
A Pen by Bottomline Interactive
Mouse follow
Simple Hover Title Slide
IE10 Conditional Statement
CSS Page Curl Shadows
CSS Stitched Effect
Unusual Underline
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!