Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Native Dropdown</title>
 
</head>
  
<body>
  
     <ul>
        <li>
            <select class="dropdown" name="fruits">
                <option value="Bananas">Bananas</option>
                <option value="Oranges">Oranges</option>
                <option value="Apples">Apples</option>
                <option value="Pears">Pears</option>
            </select>
        </li>
        <li>
            <select class="dropdown" name="cities">
                <option value="Arizona">Arizona</option>
                <option value="California">California</option>
                <option value="Colorado">Colorado</option>
                <option value="Conneticut">Conneticut</option>
            </select>
        </li>
    </ul>
  
</body>
</html>
 
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dropdown {
    border: 1;
    padding: 3px 5px;
    width: 100%;
    background: url('http://dummyimage.com/15x15/00ff40/000&text=^') no-repeat right center #FFF;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}
 
if (location.pathname === '/welcome' || location.pathname === '/welcome/') {
  location = '/welcome/edit?html,live';
}
if (window.location.pathname.indexOf('/edit') !== -1) $('a.open').click(function (event) {
  event.preventDefault();
  window.top.$('a[href$="' + this.hash + '"]').mousedown().click();
});
var presses = 0;
var spin = [
  "Woahohaohaohaahoahaohaohaohaohaoha...",
  "Nononono...aiiiiiiiiiiiiieeeeeeee....",
  "Aaaaaaaaaghhhhh...woahwoahwoahwoahwoah...",
  "You're eeeeeeeeviiiiiiilllllllll....",
  "Eee...eee...eee...eee...eee...",
  "Woowoowoowoowoowoowoowoowoo..."
];
  
var stop = [
  "Please... never again.",
  "I'm so dizzy.",
  "That's just... cruel.",
  "Don't you have better things to do?",
  "I can't feel my toes... oh wait, I don't have any toes!",
  "This isn't fun anymore.",
  "...",
  "I'm going to be sick.",
  "Uh-oh, I think I just dropped some tables...",
  "Yep, I think I'm about to SQL-project everywhere...",
  "SELECT * FROM `stomach`...",
  "var_dump($result)...",
  "+_+"
];
$('#dave').mousedown(function () {
  
  $('#message').fadeOut(function () {
    $(this).text(spin[presses % spin.length]);
    presses = presses + 1;
  }).fadeIn();
  
}).mouseup(function () {
  
  $('#message').fadeOut(function () {
    $(this).text(stop[presses % stop.length]);
  }).fadeIn();
  
  if( presses >= stop.length - 1 ) {
    $(this).animate({left: '-999px'}, 1000 * 10, function () {
      $(this).animate({left: '0'}, 1000 * 4);
      presses = 0;
    });
  }
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers