在输入框内应用蓝色框和图标

Question

基于此代码，我希望将其添加到包含文本的输入框内。 有可能做到吗？

谢谢！

 $(".delete-tag").click(function() { $(this).parent().remove(); }); 

 .delete-tag { width: 14px; height: 14px; vertical-align: middle; display: inline-block; cursor: pointer; margin-left: 3px; margin-top: 1px; margin-bottom: -1px; } .delete-tag:hover, .delete-tag-active { background-image: url("https://cdn0.iconfinder.com/data/icons/gcons-2/24/silhouette5-16.png"), none; background-size: initial; } .delete-tag { background-image: url('https://cdn0.iconfinder.com/data/icons/gcons-2/22/airplane1-16.png'); margin-top: 0; margin-bottom: 0; } .post-tag { text-decoration: none; text-align: center; line-height: 1; color: #3e6d8e; font-size: 12px; white-space: nowrap; background: #e4edf4; border: 1px solid #e4edf4; display: inline-block; border-radius: 0; -webkit-transition: color .15s ease, background .15s ease, border .15s ease; -moz-transition: color .15s ease, background .15s ease, border .15s ease; -ms-transition: color .15s ease, background .15s ease, border .15s ease; -o-transition: color .15s ease, background .15s ease, border .15s ease; margin: 2px 2px 2px 0; padding: .4em .5em; } .post-tag:hover { text-decoration: none; color: #3e6d8e; background-color: #dae6ef; border: 1px solid #dae6ef; background-color: #DAE6EF; } 

 <span class="post-tag"> aasdfas <span class="delete-tag" title="remove this tag"></span> </span> <span class="post-tag"> basdfasdf <span class="delete-tag" title="remove this tag"></span> </span> <span class="post-tag"> basdfasdf <span class="delete-tag" title="remove this tag"></span> </span> <br/> <br/> <br/> <img src="https://cdn0.iconfinder.com/data/icons/gcons-2/24/laptop1-16.png" /> 

Answer 1

看看我已在div.tags使用标签并在div块中添加了p[contenteditable=true]的代码段，现在显然您将拥有多个标签，因此我将一个标签保存在一个标签中，另外两个保存在另一个标签中一

 $(".delete-tag").click(function() { $(this).parent().remove(); }); 

 .delete-tag { width: 14px; height: 14px; vertical-align: middle; display: inline-block; cursor: pointer; margin-left: 3px; margin-top: 1px; margin-bottom: -1px; } .delete-tag:hover, .delete-tag-active { background-image: url("https://cdn0.iconfinder.com/data/icons/gcons-2/24/silhouette5-16.png"), none; background-size: initial; } .delete-tag { background-image: url('https://cdn0.iconfinder.com/data/icons/gcons-2/22/airplane1-16.png'); margin-top: 0; margin-bottom: 0; } .post-tag { text-decoration: none; text-align: center; line-height: 1; color: #3e6d8e; font-size: 12px; white-space: nowrap; background: #e4edf4; border: 1px solid #e4edf4; display: inline-block; border-radius: 0; -webkit-transition: color .15s ease, background .15s ease, border .15s ease; -moz-transition: color .15s ease, background .15s ease, border .15s ease; -ms-transition: color .15s ease, background .15s ease, border .15s ease; -o-transition: color .15s ease, background .15s ease, border .15s ease; margin: 2px 2px 2px 0; padding: .4em .5em; float:right; } .post-tag:hover { text-decoration: none; color: #3e6d8e; background-color: #dae6ef; border: 1px solid #dae6ef; background-color: #DAE6EF; } .inputtext{ float:left; border:1px inset #ccc; margin:10px; width:100%; min-height:30px; } .inputtext > p.editable{ float:left; height:100%; margin:3px; width:70%; display:inline; padding:2px; } .tags{float:left;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=inputtext> <div class=tags> <span class="post-tag"> aasdfas<span class="delete-tag" title="remove this tag"></span> </span> </div> <p class=editable contenteditable=true>Editable Text</p> </div> <div class=inputtext> <div class=tags> <span class="post-tag"> basdfasdf<span class="delete-tag" title="remove this tag"></span> </span> <span class="post-tag"> basdfasdf <span class="delete-tag" title="remove this tag"></span> </span> </div> <p class=editable contenteditable=true>Editable Text</p> </div> <br/> <br/> <br/> <img src="https://cdn0.iconfinder.com/data/icons/gcons-2/24/laptop1-16.png" /> 

这就是我的样子。 我在Mac上使用野生动物园。 我检查与Firefox看起来还可以。 您还在寻找其他东西吗