javascript - 如何使用 css、html 和 jquery 创建标记样式？

Question

我有一个 input[type=text] 元素和另一个用于我表单中选定元素的 div。

我需要创建自己的自定义标签插件容器，我的问题在于标签容器的 css 样式和布局及其外观。

这是我的实际阶段(很差):http://jsfiddle.net/db8upk61/1/

我想要类似的东西:

挑战

• 如何模拟这些元素之间的输入边框？
• 如何像上面的示例那样从输入元素中删除边框？
• 如何在输入的同一行维护标签？

Answer 1

有很多插件可以做到这一点，但是，正如您需要做的那样。

你可以创建一个模拟输入的容器，在这个容器中你可以把真正的输入与白色边框放在一起，我做了一个例子，看看:

http://jsfiddle.net/93n2af0e/

CSS 代码:

.input-select-tag{
    background-color: #FFFFFF;
    boder: 1px solid #F1F1F1;
    height: 36px;
    width: 450px;
}
.selected-tags{
    padding: 2px;
}
.button{
    float: left;
    padding: 5px;
    margin-left: 2px;
}
.input{
    float: left;
    border: #FFFFFF;
    margin-left: 2px;
    padding: 5px;
}
.clear{
    clear: both;
}

HTML:

<form class='form-horizontal well'>
    <div class='control-group'>

        <div class='input-select-tag'>
            <div class='selected-tags'>
                <span class='alert button alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span> 
                <span class='alert button alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>          
            </div>

            <input type='text' name='selectTags' class='input' size="40"/>    
            <div class='clear'></div>
        </div>
    </div>
</form>

希望对您有所帮助。