Skip to content

Instantly share code, notes, and snippets.

@todc
Created July 6, 2012 19:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save todc/3062133 to your computer and use it in GitHub Desktop.
Save todc/3062133 to your computer and use it in GitHub Desktop.
Google-esque styling for jquery.tokeninput.js plugin
ul.token-input-list-facebook {
overflow: hidden;
height: auto !important;
height: 30px;
max-width: 400px;
border: 1px solid #8496ba;
cursor: text;
font-size: 12px;
font-family: Verdana;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background-color: #fff;
list-style-type: none;
clear: left;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
.box-shadow(none);
.box-sizing(border-box);
.border-radius(1px);
}
ul.token-input-list-facebook:hover {
border: 1px solid #b9b9b9;
}
ul.token-input-input-token-facebook li input,
ul.token-input-list-facebook li input {
width: 100px;
padding: 3px 8px;
background-color: transparent;
margin: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
height: auto;
-webkit-appearance: caret;
border-color: transparent;
}
ul.token-input-list-facebook li input:hover {
border-color: transparent;
.box-shadow(none);
}
ul.token-input-list-facebook li input:focus,
ul.token-input-list-facebook li input:active {
border-color: transparent;
.box-shadow(none);
}
li.token-input-token-facebook {
overflow: hidden;
height: auto !important;
line-height: 23px;
padding: 0 0 0 5px;
margin: 1px;
background-color: #DAE4F6;
color: #222;
cursor: default;
border: 1px solid #DAE4F6;
font-size: 12px;
font-family: Arial, sans-serif;
.border-radius(2px);
float: left;
white-space: nowrap;
vertical-align: top;
-webkit-user-select: none;
}
li.token-input-token-facebook p {
display: inline;
padding: 0;
margin: 0;
}
li.token-input-token-facebook span {
color: #444;
font-size: 17px;
font-family: Arial, sans-serif;
margin: 0;
padding: 1px 4px;
font-weight: bold;
line-height: 23px;
vertical-align: top;
cursor: pointer;
}
li.token-input-selected-token-facebook {
background-color: #A6D7F5;
border: 1px solid #A6D7F5;
color: #222;
}
li.token-input-input-token-facebook {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
div.token-input-dropdown-facebook {
position: absolute;
top: 100%;
left: 0;
float: left;
width: 100%;
max-width: 386px;
background-color: #fff;
overflow: hidden;
cursor: default;
font-size: 13px;
font-family: Arial, sans-serif;
line-height: 16px;
z-index: 10000;
padding: 1px;
margin-top: 1px;
border: 1px solid rgba(0, 0, 0, 0.2);
.box-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
div.token-input-dropdown-facebook p {
margin: 0;
padding: 5px;
font-weight: bold;
color: #222;
}
div.token-input-dropdown-facebook ul {
margin: 0;
padding: 0;
}
div.token-input-dropdown-facebook ul li {
background-color: #fff;
padding: 6px 10px;
margin: 0;
list-style-type: none;
}
div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
background-color: #fff;
}
div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
background-color: #fff;
}
div.token-input-dropdown-facebook ul li em {
font-weight: bold;
font-style: normal;
}
div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
background-color: #eee;
color: #222;
}
ul.token-input-list-facebook.token-input-focus {
border: 1px solid #4d90fe;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment