Velge markup overview

velge.css.sass

// This is the original input, we want it hidden
.velge-original {
  display: none;
}

// This is the tag / input container
.velge {

  // Tags list
  ul {

    // Tag item, comprised of a value and a remove link
    li {

      i {}

      a {}
    }
  }

  // Tag input field, this is inline with tags
  input {
  }

  // A small trigger to toggle displaying the dropdown
  button {
  }

  // The dropdown list, positioned directly below the input
  ol {
    li {}
  }
}

velge_markup.html

<input class='velge-original' type='text' />
<div class='velge'>
  <ul>
    <li><i>internet explorer</i><a href='#'>x</a></li>
    <li><i>opera</i><a href='#'>x</a></li>
  </ul>
  <input type='text' />
  <button>v</button>
</div>

<ol>
  <li>Chrome</li>
  <li>Firefox</li>
  <li>Safari</li>
</ol>