Skip to content

Instantly share code, notes, and snippets.

@JoshuaChi
Created May 10, 2013 03:01
Show Gist options
  • Save JoshuaChi/5552149 to your computer and use it in GitHub Desktop.
Save JoshuaChi/5552149 to your computer and use it in GitHub Desktop.
Inspired by demo(http://twitter.github.io/typeahead.js/examples/). Tested with "jQuery UI CSS Framework 1.8.14"
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
right: auto;
z-index: 1000;
display: none;
min-width: 160px;
_width: 160px;
padding: 8px 0px;
margin: 2px 0 0 0;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-autocomplete .ui-menu-item {
line-height: 24px;
display: block;
clear: both;
font-weight: normal;
color: #333;
white-space: nowrap;
}
.ui-autocomplete .ui-menu-item a {
padding: 5px 10px;
line-height: none;
}
.ui-autocomplete a.ui-state-focus {
font-weight: bold;
margin: 0 !important;
background-color: #0097cf;
color: #ffffff;
text-decoration: none;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
border: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment