Facebook style select box

Facebook style select box

Facebook Style Select box using Jquery ui.

It provides stylish select dropdown menu. It provides the functionality of the select drop down like facebook select
box.
Preview :

Facebook Style Select box dropdown menu

Facebook Style Select dropdown menu

Following Jquery and Css are Required for the functionality.
Add the following Jquery and css in the header of the page.

<script src="//code.jquery.com/jquery-1.10.2.js"></script><script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Demo syntax for Facebook style select box

Example

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Facebook Style Jquery Select Dropdown Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#status" ).selectmenu();
});
</script>
<style>
fieldset {
border: 0;
}
label {
display: block;
margin: 35px 0 0 0;
}
select {
width: 290px;
}
.overflow {
height: 290px;
}
</style>
</head>
<body><div class="main-demo">

<form action="#">

<fieldset>
<label for="speed">Select a Status</label>
<select name="status" id="status">
<option selected="selected">Public</option>
<option>Friends</option>
<option>Only Me</option>
</select>
</form>

</div>

</body>
</html>

Demo »


User Ans/Comments

📖 Read More


Advertisements