jQuery仿百度输入标签插件附效果图_jquery

.clearfix:after
{
clear: both;
content: " ";
display: block;
height: 0;
}
.tags-wrapper
{
width: 500px;
position:relative;
}
#addTagWrap
{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D9D9D9;
padding: 0 5px;
}
#addTagWrap .inner-tag-wrapper,.layer-tag-name
{
background: none repeat scroll 0 0 #40A8CD;
border-radius: 3px;
color: #FFFFFF;
float: left;
height: 26px;
line-height: 26px;
margin: 4px 6px 0 0;
padding: 0 5px 0 10px;
white-space: nowrap;
}
#addTagWrap .inner-tag-close
{
color: #A0D4E6;
font-family: "宋体" ,sans-serif;
margin-left: 4px;
text-decoration: none;
}
#tagInput
{
background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
margin: 0;
height: 24px;
line-height: 24px;
overflow: hidden;
padding: 5px;
width: 215px;
}
#tagInput:focus{ outline:none }
.layer-tags-wrapper
{
border: 1px solid #DADADA;
border-top:0;
overflow: auto;
position:absolute;
left:0;
right:0;
display:none;
background: none repeat scroll 0 0 #FFFFFF;
}
.layer-tags-wrapper .layer-tags-box
{
padding: 0 5px;
}
.layer-tags-wrapper .layer-tags-left
{
float: left;
text-align: center;
padding-right: 5px;
margin-top: 4px;
height: 26px;
line-height: 26px;
}
.layer-tags-wrapper .layer-tags-right
{
overflow: auto;
}
.layer-tags-wrapper .layer-tag-name
{
padding-right: 10px;
text-decoration: none;
}
.layer-tags-foot
{
height: 30px;
line-height: 30px;
color: #999999;
padding-left:5px;
}
.layer-tags-foot-top
{
margin-top:5px;
border-top:1px dotted #C9C9C9;
}
.message-box
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.35);
color: #FFFFFF;
width: 300px;
min-height: 50px;
line-height: 50px;
top: 50%;
left: 50%;
margin-top: -50px; /*注意这里必须是DIV高度的一半*/
margin-left: -150px; /*这里是DIV宽度的一半*/
position: fixed !important; /*FF IE7*/
position: absolute; /*IE6*/
z-index: 999;
text-align: center;
border-radius: 5px;
}