All geek questions in one place

How do you create tags like stackoverflow with text style

I was wondering how can you create a css style inside an input field, like a stackoverflow tag system?

When you click on a tag, the text will be stylized. And also, when you click on the stylized tag, it will be fine. I guess my main problem is how is the text style inside the input field?

Thanks!

+4
source share
3 answers

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

Having studied this code, you can create something similar or just use the plugin.

+2
source

Tags are not input fields, they are links! In SO, 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; }
+7
source

Only the bit you enter is input, other tags are just styled elements a . When you press return, the input moves to the right and becomes shorter, and the value is copied and a new element a .

The input text is not framed.

+4
source

Source: https://habr.com/ru/post/1379040/

More articles:


All Articles