how do you create tags like stackoverflow with tex

Question

I was wondering how you can create css styling inside an input field such as stackoverflow's tagging system?

When you click on a tag, the text will be styled. And also, when you click on the styled tag, it will be normal again. I guess my main concern is how to style text inside an input field?

Thanks!

Answer 1

Only the bit you type in is an input, the other tags are just styled a elements. When you hit return, the input moves right and gets shorter, and the value is copied and a new a element is created.

The text in the input isn't styled.

Answer 2

This might help you: http://basdebie.com/jquery-plugins/jquery-tags-autosuggest-like-delicious-stackoverflow-facebook/

By looking at this code, you should be able to create something similar, or just use the plugin.

Answer 3

The tags are not input fields, they are links! On SO, the tags use the following styles:

.post-tag {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.4;
    white-space: nowrap;
}

a.post-tag:hover {
    background-color: #3E6D8E;
    color: #E0EAF1;
    border-bottom: 1px solid #37607D;
    border-right: 1px solid #37607D;
    text-decoration: none;
}