stackoverflowのようなタグをテキストスタイリングで作成する方法

Question

stackoverflowのタグ付けシステムなどの入力フィールド内でCSSスタイリングをどのように作成できるのでしょうか？

タグをクリックすると、テキストがスタイルされます。また、スタイル付きのタグをクリックすると、通常の状態に戻ります。私の主な関心事は、入力フィールド内でテキストのスタイルを設定する方法だと思いますか？

ありがとうございます！

Answer 1

これはあなたを助けるかもしれない：http://basdebie.com/jquery-plugins/jquery-tags-autosuggest-like-delicious-stackoverflow-facebook/

このコードを見ることで、同様のものを作成、または単にプラグインを使用することができるはずです。

Answer 2

あなたが入力したビットだけが入力ですが、他のタグはちょうどaの要素になります。リターンを押すと、入力が右に移動して短くなり、値がコピーされ、新しいa要素が作成されます。

入力内のテキストのスタイルが設定されていません。

Answer 3

タグは入力フィールドではなく、リンクです！ SOの場合、タグは次のスタイルを使用します。

.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; 
}