ul.tagit { padding: 1px 5px; overflow: auto; margin-left: inherit; /* usually we don't want the regular ul margins. */ margin-right: inherit; } ul.tagit li { display: block; float: left; margin: 2px 5px 2px 0; } ul.tagit li.tagit-choice { padding: .2em 18px .2em .5em; position: relative; line-height: inherit; } ul.tagit li.tagit-new { padding: .25em 4px .25em 0; } ul.tagit li.tagit-choice a.tagit-label { cursor: pointer; text-decoration: none; } ul.tagit li.tagit-choice .close { cursor: pointer; position: absolute; right: .1em; top: 50%; margin-top: -8px; } /* used for some custom themes that don't need image icons */ ul.tagit li.tagit-choice .close .text-icon { display: none; } ul.tagit li.tagit-choice input { display: block; float: left; margin: 2px 5px 2px 0; } ul.tagit input[type="text"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: none; margin: 0; padding: 0; width: inherit; background-color: inherit; outline: none; } /***** ZENDESK ***/ /* Optional scoped theme for tag-it which mimics the zendesk widget. */ ul.tagit { border-style: solid; border-width: 1px; border-color: #C6C6C6; background: inherit; } ul.tagit li.tagit-choice { -moz-border-radius: 6px; border-radius: 6px; -webkit-border-radius: 6px; border: 1px solid #CAD8F3; background: none; background-color: #DEE7F8; color: #555; font-weight: normal; } ul.tagit li.tagit-choice a.close { text-decoration: none; } ul.tagit li.tagit-choice .close { right: .4em; } ul.tagit li.tagit-choice .ui-icon { display: none; } ul.tagit li.tagit-choice .close .text-icon { display: inline; font-family: arial, sans-serif; font-size: 16px; line-height: 16px; color: #777; } ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove { background-color: #bbcef1; border-color: #6d95e0; } ul.tagit li.tagit-choice a.tagLabel:hover, ul.tagit li.tagit-choice a.close .text-icon:hover { color: #222; } ul.tagit input[type="text"] { color: #333333; background: none; }