CSS   55

token input

Guest on 7th July 2022 02:04:57 AM

  1. /* Example tokeninput style #1: Token vertical list*/
  2. ul.token-input-list, ul.token-input-list li, ul.token-input-list li input, li.token-input-token, li.token-input-token p, li.token-input-token span, li.token-input-selected-token, div.token-input-dropdown, div.token-input-dropdown p, div.token-input-dropdown ul, div.token-input-dropdown p, div.token-input-dropdown ul li, div.token-input-dropdown ul li.token-input-dropdown-item, div.token-input-dropdown ul li.token-input-dropdown-item2, div.token-input-dropdown ul li em, div.token-input-dropdown ul li.token-input-selected-dropdown-item {
  3.         list-style:inherit !important;
  4.         line-height:inherit !important;
  5.         color: inherit !important;
  6.     font-size: inherit !important;
  7.     line-height: inherit !important;
  8. }
  9. ul.token-input-list {
  10.     overflow: hidden;
  11.     height: auto !important;
  12.     height: 1%;
  13.     width: 400px;
  14.     border: 1px solid #999;
  15.     cursor: text;
  16.     font-size: 12px;
  17.     font-family: Verdana;
  18.     z-index: 999;
  19.     margin: 0;
  20.     padding: 0;
  21.     background-color: #fff;
  22.     list-style-type: none;
  23.     clear: left;
  24. }
  25.  
  26. ul.token-input-list li {
  27.     list-style-type: none;
  28. }
  29.  
  30. ul.token-input-list li input {
  31.     border: 0;
  32.     width: 350px;
  33.     padding: 3px 8px;
  34.     background-color: white;
  35.     -webkit-appearance: caret;
  36. }
  37.  
  38. li.token-input-token {
  39.     overflow: hidden;
  40.     height: auto !important;
  41.     height: 1%;
  42.     margin: 3px;
  43.     padding: 3px 5px;
  44.     background-color: #d0efa0;
  45.     color: #000;
  46.     font-weight: bold;
  47.     cursor: default;
  48.     display: block;
  49. }
  50.  
  51. li.token-input-token p {
  52.     float: left;
  53.     padding: 0;
  54.     margin: 0;
  55. }
  56.  
  57. li.token-input-token span {
  58.     float: right;
  59.     color: #777;
  60.     cursor: pointer;
  61. }
  62.  
  63. li.token-input-selected-token {
  64.     background-color: #08844e;
  65.     color: #fff;
  66. }
  67.  
  68. li.token-input-selected-token span {
  69.     color: #bbb;
  70. }
  71.  
  72. div.token-input-dropdown {
  73.     position: absolute;
  74.     width: 400px;
  75.     background-color: #fff;
  76.     overflow: hidden;
  77.     border-left: 1px solid #ccc;
  78.     border-right: 1px solid #ccc;
  79.     border-bottom: 1px solid #ccc;
  80.     cursor: default;
  81.     font-size: 12px;
  82.     font-family: Verdana;
  83.     z-index: 1;
  84. }
  85.  
  86. div.token-input-dropdown p {
  87.     margin: 0;
  88.     padding: 5px;
  89.     font-weight: bold;
  90.     color: #777;
  91. }
  92.  
  93. div.token-input-dropdown ul {
  94.     margin: 0;
  95.     padding: 0;
  96. }
  97.  
  98. div.token-input-dropdown ul li {
  99.     background-color: #fff;
  100.     padding: 3px;
  101.     list-style-type: none;
  102. }
  103.  
  104. div.token-input-dropdown ul li.token-input-dropdown-item {
  105.     background-color: #fafafa;
  106. }
  107.  
  108. div.token-input-dropdown ul li.token-input-dropdown-item2 {
  109.     background-color: #fff;
  110. }
  111.  
  112. div.token-input-dropdown ul li em {
  113.     font-weight: bold;
  114.     font-style: normal;
  115. }
  116.  
  117. div.token-input-dropdown ul li.token-input-selected-dropdown-item {
  118.     background-color: #d0efa0;
  119. }

Raw Paste


Login or Register to edit or fork this paste. It's free.