你如何使用文本样式创建像 stackoverflow 这样的标签答案

【问题标题】：how do you create tags like stackoverflow with text styling你如何使用文本样式创建像 stackoverflow 这样的标签
【发布时间】：2023-03-28 15:35:01
【问题描述】：

我想知道如何在诸如 stackoverflow 的标记系统之类的输入字段中创建 css 样式？

当您单击标签时，文本将被设置样式。而且，当您单击样式标签时，它将再次正常。我想我主要关心的是如何在输入字段中设置文本样式？

谢谢！

【问题讨论】：

您没有开箱即用。看起来像一个文本框，实际上不是一个。无法在文本框中设置任何样式，但可以使 div 看起来像一个。一些值得深思的食物。
请问您如何对删除图标进行 css 处理？
我在 google 中查找了“可更新标签”，第一个结果是：goodies.pixabay.com/jquery/tag-editor/demo.html

标签： css input styles

【解决方案1】：

标签不是输入字段，它们是链接！在 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;
}

【讨论】：

以及如何创建一个系统，当用户按下时，您的样式就会生效？（使用 js 或 jquery）（完全像 stackoverflow）

【解决方案2】：

只有您输入的位是输入，其他标签只是样式a 元素。当您点击返回时，输入向右移动并变短，并复制该值并创建一个新的 a 元素。

输入中的文本没有样式。

【讨论】：

【解决方案3】：

这可能会对您有所帮助：http://basdebie.com/jquery-plugins/jquery-tags-autosuggest-like-delicious-stackoverflow-facebook/

通过查看此代码，您应该能够创建类似的东西，或者只使用插件。

【讨论】：