как вы создаете теги, такие как stackoverflow с помощью стиля текста - PullRequest
Новая
       33

как вы создаете теги, такие как stackoverflow с помощью стиля текста

4 голосов
/ 01 ноября 2011

Мне было интересно, как вы можете создать стиль CSS внутри поля ввода, такого как система тегов stackoverflow?

При нажатии на тег текст будет стилизован.А также, когда вы нажимаете на стилизованный тег, он снова будет нормальным.Я думаю, что моя главная проблема в том, как стилизовать текст внутри поля ввода?

Спасибо!

Ответы [ 3 ]

8 голосов
/ 01 ноября 2011

Теги не поля ввода, это ссылки! В 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;
}
4 голосов
/ 01 ноября 2011

Только бит, который вы вводите, является вводом, остальные теги просто стилизованы a элементами Когда вы нажимаете return, ввод перемещается вправо и становится короче, а значение копируется и создается новый элемент a.

Текст на вводе не стилизован.

1 голос
/ 01 ноября 2011

Это может помочь вам: http://basdebie.com/jquery-plugins/jquery-tags-autosuggest-like-delicious-stackoverflow-facebook/

Глядя на этот код, вы сможете создать нечто подобное или просто использовать плагин.

...