react-tag-suggest/css/main.styl

Tag auto suggest

.tag-input {
  font-family: Arial, Helvetica, sans-serif;
  border: solid 1px #000;
  box-sizing: border-box;
  padding: 5px 4px 0;
  position: relative;
  .new-tag {
    border: none;
    font-size: 13px;
    margin-bottom: 7px;
    padding: 3px 2px;
    outline: none;
    width: auto;
  }
  .new-tag-size {
    position: absolute;
    left: -10000px;
    font-size: 13px;
    padding: 0 2px;
  }
  .pill {
    display: inline-block;
    margin: 0 5px 5px 0;
    border-radius: 3px;
    border: solid #000 3px;
    background-color: #000;
    color: #fff;
    padding: 0px 3px;
    font-size: 13px;
    transition: background-color border-color 0.5s ease;
    &.highlight {
      background-color: #f1c40f;
      border-color: #f1c40f;
    }
    .remove {
      cursor: pointer;
      vertical-align: middle;
      padding: 0 0 0 5px;
    }
  }
}

.tag-suggest {
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    border: solid 1px;
    position: absolute;
  }
  li {
    &.highlight {
      background-color: #000;
      color: #fff;
    }
    div {
      box-sizing: border-box;
      padding: 5px;
      position: relative;
      min-width: 120px;
    }
  }
  .suggestion {
    cursor: pointer;
    display: block;
    margin-right: 20px;
    white-space: nowrap;
  }
  .set-input {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
  }
}