Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
  <title>jQuery UI Select</title>
  <style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
​
<style>
​
  #list { background-image: url('https://www.google.com/images/srpr/logo11w.png');}
  #list { width: 300px; list-style: none; margin: 0; padding: 0; }
  div { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
  div .handle { width:100; background: #000; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
  .ui-selecting { background: #eee; }
  .ui-selecting .handle { background: #ccc; }
  .ui-selected { background: #def; }
  .ui-selected .handle { background: #cde; }
​
</style>
​
</head>
<body>
​
<div id="list">
  <div>Item 1 <a href="">x</a></div>
  <div><select><option>1</option><option>2</option></select>Item 2</div>
  <div>Item 3</div>
  <div id="aa">Item 4</div>
  <div>Item 5</div>
</div>
​
</body>
</html>
​
 
div{
  background-color:#fff;
}
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers