Example tokeninput style #2: Mac Style
fieldset.token-input-mac {
position: relative; padding: 0; margin: 5px 0; background: #fff; width: 400px; border: 1px solid #A4BDEC; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}
fieldset.token-input-mac.token-input-dropdown-mac {
border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25); -moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25); -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
}
ul.token-input-list-mac {
overflow: hidden; height: auto !important; height: 1%; cursor: text; font-size: 12px; font-family: Verdana, sans-serif; min-height: 1px; z-index: 999; margin: 0; padding: 3px; background: transparent;
}
ul.token-input-list-mac.error {
border: 1px solid #C52020;
}
ul.token-input-list-mac li {
list-style-type: none;
}
li.token-input-token-mac p {
display: inline; padding: 0; margin: 0;
}
li.token-input-token-mac span {
color: #a6b3cf; margin-left: 5px; font-weight: bold; cursor: pointer;
}
TOKENS
li.token-input-token-mac {
font-family: "Lucida Grande", Arial, sans-serif; font-size: 9pt; line-height: 12pt; overflow: hidden; height: 16px; margin: 3px; padding: 0 10px; background: none; background-color: #dee7f8; color: #000; cursor: default; border: 1px solid #a4bdec; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; float: left;
}
li.token-input-highlighted-token-mac {
background-color: #bbcef1; border: 1px solid #598bec; color: #000;
}
li.token-input-selected-token-mac {
background-color: #598bec; border: 1px solid transparent; color: #fff;
}
li.token-input-highlighted-token-mac span.token-input-delete-token-mac {
color: #000;
}
li.token-input-selected-token-mac span.token-input-delete-token-mac {
color: #fff;
}
li.token-input-input-token-mac {
border: none; background: transparent; float: left; padding: 0; margin: 0;
}
li.token-input-input-token-mac input {
border: 0; width: 100px; padding: 3px; background-color: transparent; margin: 0;
}
div.token-input-dropdown-mac {
position: absolute; border: 1px solid #A4BDEC; border-top: none; left: -1px; right: -1px; background-color: #fff; overflow: hidden; cursor: default; font-size: 10pt; font-family: "Lucida Grande", Arial, sans-serif; padding: 5px; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25); -moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25); -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25); clip:rect(0px, 1000px, 1000px, -10px);
}
div.token-input-dropdown-mac p {
font-size: 8pt; margin: 0; padding: 0 5px; font-style: italic; color: #aaa;
}
div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
font-family: "Lucida Grande", Arial, sans-serif; font-size: 10pt; font-weight: bold; border: none; padding: 0 5px; margin: 0;
}
div.token-input-dropdown-mac ul {
margin: 0; padding: 0;
}
div.token-input-dropdown-mac ul li {
list-style-type: none; cursor: pointer; background: none; background-color: #fff; margin: 0; padding: 0 0 0 25px;
}
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac {
background-color: #fff;
}
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac.odd {
background-color: #ECF4F9; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
}
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {
float: right; font-size: 8pt; font-style: italic; padding: 0 10px 0 0; color: #999;
}
div.token-input-dropdown-mac ul li strong {
font-weight: bold; text-decoration: underline; font-style: none;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac, div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd {
background-color: #598bec; color: #fff; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.token-input-dropdown-item-description-mac, div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
color: #fff;
}