NiceSnippets.com
Fancy Country Select Box Design html,css and jquery
In this snippet design you can show fancy select box design with country data. this select box drop down with effect. this fancy select box create usign SelectInspiration jquery. in this fancy select box we use new font style. you can simply copy past in your project. We allows to free snippets of fancy select box css , you can download full code of fancy select dropdown layout. Here in this post i will give you example of jquery custom select dropdown snippet and you will get simple code of html, css and jquery. In jquery drop down list snippet i give you three tab with html, css and js, you can easily get code of jquery select box layout.
<!DOCTYPE html>
<html>
<head>
<title>Fancy Custom Select Box</title>
<link rel="stylesheet" type="text/css" href="custom.css">
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/SelectInspiration/css/demo.css" />
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/SelectInspiration/css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/SelectInspiration/css/cs-skin-elastic.css" />
</head>
<body class="main-section">
<h1>Fancy Custom Select Box</h1>
<div class="container-section">
<section>
<select class="cs-select cs-skin-elastic">
<option value="" disabled selected>Select a Country</option>
<option value="france" data-class="flag-france">France</option>
<option value="brazil" data-class="flag-brazil">Brazil</option>
<option value="argentina" data-class="flag-argentina">Argentina</option>
<option value="south-africa" data-class="flag-safrica">South Africa</option>
</select>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.js"></script>
<script src="https://tympanus.net/Development/SelectInspiration/js/selectFx.js"></script>
</body>
</html>
body{
background-color: #481C3F !important;
border:none !important;
}
body::before, body::after{
content: none !important;
}
.main-section h1{
text-align: center;
}
@font-face{
font-family: 'icomoon';
src:url('//nicesnippets.com/demo/fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
url('//nicesnippets.com/demo/fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
url('//nicesnippets.com/demo/fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
(function() {
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
new SelectFx(el);
} );
})();
