javascript - CSS - 像 Pinterest 一样的气泡输入搜索栏

标签 javascript html css

我有一个搜索栏,用户可以在其中输入关键字,我希望将关键字括在带有十字的气泡中,以便在用户按空格输入另一个关键字时将其删除。就像在 Pinterest 搜索栏上所做的那样,如下图所示。

enter image description here

我可以在 CSS 中围绕文本制作气泡,但如何从输入框内部绘制它们是我所困惑的地方。

最佳答案

值得一看的是 Select2 库,它具有标记选项,您可以看到它的实际效果 here (在“标记支持”部分下)。

或者,您可以在基于标签的搜索上查看以下CodePen链接

http://codepen.io/jonahvsweb/pen/LGVRaX

希望这有帮助!

关于javascript - CSS - 像 Pinterest 一样的气泡输入搜索栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38795425/

相关文章:

javascript - Jquery Validation 使用索引验证表单数组

Javascript 在同一选项卡中打开新窗口

php - 我应该先尝试什么脚本?

javascript - 悬停时左侧边距不适用于 Carousel

java - 从 JavaScript 到 servlet 的 Ajax 调用

javascript - 100% body 高度(内容动态加载)

html - 图像在中心和背景渐变后面

javascript - 如何获得用css rotate变换的元素的位置

javascript - 鼠标滚动事件不适用于 react 滚动条内的 react 选择

c# - 使用 TuesPechkin 渲染本地镜像?