Skip to content

Instantly share code, notes, and snippets.

@spalenza
Created July 4, 2013 19:53
Show Gist options
  • Save spalenza/5929890 to your computer and use it in GitHub Desktop.
Save spalenza/5929890 to your computer and use it in GitHub Desktop.
ul.token-input-list-bootstrap {
cursor: text;
overflow: hidden;
height: auto !important;
margin: 0;
list-style-type: none;
border: 1px solid #cccccc; }
ul.token-input-list-bootstrap {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; }
ul.token-input-list-bootstrap.token-input-focused-bootstrap {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */ }
ul.token-input-list-bootstrap li {
float: left; }
ul.token-input-list-bootstrap li p {
display: inline;
padding: 0;
margin: 0; }
ul.token-input-list-bootstrap li.token-input-token-bootstrap {
width: auto;
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #f3f3f3;
background-image: -moz-linear-gradient(top, #eeeeee, #fbfbfb);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#fbfbfb));
background-image: -webkit-linear-gradient(top, #eeeeee, #fbfbfb);
background-image: -o-linear-gradient(top, #eeeeee, #fbfbfb);
background-image: linear-gradient(to bottom, #eeeeee, #fbfbfb);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFBFBFB', GradientType=0);
border-color: #fbfbfb #fbfbfb #d4d4d4;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #fbfbfb;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
margin: 0px 0px 3px 0px;
cursor: pointer; }
ul.token-input-list-bootstrap li.token-input-token-bootstrap:hover, ul.token-input-list-bootstrap li.token-input-token-bootstrap:focus, ul.token-input-list-bootstrap li.token-input-token-bootstrap:active, ul.token-input-list-bootstrap li.token-input-token-bootstrap.active, ul.token-input-list-bootstrap li.token-input-token-bootstrap.disabled, ul.token-input-list-bootstrap li.token-input-token-bootstrap[disabled] {
color: white;
background-color: #fbfbfb;
*background-color: #eeeeee; }
ul.token-input-list-bootstrap li.token-input-token-bootstrap:active, ul.token-input-list-bootstrap li.token-input-token-bootstrap.active {
background-color: #e1e1e1 \9; }
ul.token-input-list-bootstrap li.token-input-token-bootstrap.token-input-selected-token-bootstrap {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006ccc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #0044cc;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
ul.token-input-list-bootstrap li.token-input-token-bootstrap.token-input-selected-token-bootstrap:hover, ul.token-input-list-bootstrap li.token-input-token-bootstrap.token-input-selected-token-bootstrap:focus, ul.token-input-list-bootstrap li.token-input-token-bootstrap.token-input-selected-token-bootstrap:active, ul.token-input-list-bootstrap li.token-input-token-bootstrap.token-input-selected-token-bootstrap.active, ul.token-input-list-bootstrap li.token-input-token-bootstrap.token-input-selected-token-bootstrap.disabled, ul.token-input-list-bootstrap li.token-input-token-bootstrap.token-input-selected-token-bootstrap[disabled] {
color: white;
background-color: #0044cc;
*background-color: #003bb3; }
ul.token-input-list-bootstrap li.token-input-token-bootstrap.token-input-selected-token-bootstrap:active, ul.token-input-list-bootstrap li.token-input-token-bootstrap.token-input-selected-token-bootstrap.active {
background-color: #003399 \9; }
ul.token-input-list-bootstrap li input {
display: inline;
border: 0;
background: none;
-webkit-appearance: caret;
padding: 0; }
div.token-input-dropdown-bootstrap ul {
margin: 0;
padding: 0; }
div.token-input-dropdown-bootstrap p {
margin: 0;
padding: 5px;
color: #999999; }
div.token-input-dropdown-bootstrap ul li {
list-style-type: none;
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap; }
div.token-input-dropdown-bootstrap ul li.token-input-selected-dropdown-item-bootstrap {
color: white;
background-color: #0088cc;
cursor: pointer; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment