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

时间:2011-10-31 22:27:06

标签: css input styles

我想知道如何在输入字段中创建css样式,例如stackoverflow的标记系统?

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

谢谢!

3 个答案:

答案 0 :(得分:8)

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

答案 1 :(得分:4)

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

输入中的文字未设置样式。

答案 2 :(得分:1)

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

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