用jquery写一个标签输入框,按回车自动添加标签
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Tag Input Field</title> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans); body { font-family: "Open Sans"; border: 0; margin: 0; background: #4aa3df; } a { text-decoration: none; color: black; } input:focus { outline-width: 0; } h1 { text-align: center; color: white; font-size: 2em; background: rgba(70,70,70,0.7); border: 1px solid rgba(255,255,255,0.3); padding: 1em; width: 60%; border-radius: 0.5em; margin: 3em auto; } .container { background: rgba(70,70,70,0.3); width: 80%; margin: 5em auto; border: 1px solid rgba(255,255,255,0.3); border-radius: 0.25em; padding: 1em; } .tagfield { background: white; border: 1px solid grey; padding: 0.5rem; font-size: 0.8em; cursor: text; } .tag { margin: 2px 3px; color: black; background: #eaebed; padding: 6px 24px 6px 15px; border-radius: 2px; position: relative; display: inline-block; cursor: pointer; max-width: 95%; overflow: hidden; } .closer { position: absolute; top: 0; right: 0; bottom: 0; width: 20px; padding: 6px 0 0 0; text-align: center; vertical-align: middle; display: inline-block; border-radious: 0 2px 2px 0; } .closer:hover { background: rgba(0,0,0,0.18); } .tagno { margin: 5px; position: relative; display: inline-block; overflow: auto; } #taginput { border: 0 none; width: auto; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0