0

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

2
  • Do you mean you want to draw the x programmatically? It's far easier and quicker to just use an image or a glyph font. Jan 29, 2015 at 8:07
  • Well... what about writing x and styling it with css? Or eventually use the × HTML entity?
    – MrUpsidown
    Jan 29, 2015 at 8:23

3 Answers 3

1

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

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

0

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/.

0

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.

1
  • I tried your code. The handle function is not getting fired
    – Arti
    Jan 29, 2015 at 10:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.