CODEWITHSUNDEEP
javascriptjquerycsshtml
Arti
Arti

Reputation: 3071

A panel with a close button for a word/text

Is there any way to make something like the X on the text with css or jquery? The image below is from gmail add contacts textarea(which allows to add multiple contacts and also to delete selected contact using close button next to name).

Is there any way by which same thing can be acheived?

This is reuired

Upvotes: 0

Views: 57

Answers (3)

MegaMind
MegaMind

Reputation: 671

You can use and image to do so.

I suggest you use the javascript events

e.g. you edit the CSS and make it look like the image above when you press enter or tab.

code for that would be

<form action="#">
    <input type="text" name="txt" onkeypress="handle()" />
</form>

<script>
    function handle(e){
        if(e.keyCode === 13){        //13 corresponds to pressing enter
            //here you apply the CSS Change
        }

        return false;
    }
</script>

You use an image for the "X" , and delete the given string when it is clicked.

Upvotes: 0

Andrew Shepherd
Andrew Shepherd

Reputation: 45232

Using css, you can make it that content automtically appears after an item using the :after pseudo-element.

For example, with this HTML: 

 <div class="closePanel">
    <div>
       text_text
   </div>
</div>

You can add css to automatically place a formatted 'x' after the content of the inner element.

.closePanel :after
{
    content: "x";
    /* Add other css styles here */
}

The jsfiddle: http://jsfiddle.net/ax6yuwox/2/.

Upvotes: 0

Vijay
Vijay

Reputation: 3023

In case you want a third party plugin, here it is:

http://tagedit.webwork-albrecht.de/

Upvotes: 1

Related Questions