Home/ Questions/Q 8962073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:02:52+00:00

How can I make a textarea or a div look like this? The circles

  • 0

How can I make a textarea or a div look like this?

enter image description here

The circles can be detected by the cursor (for clicking, moving and so on).

Are there any jquery plugins that allows me to resize the textarea and increase the font size like in Pickmonkey?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can draw this easily enough using an HTML construct as follows:

        <div id="mytextbox" style="position: absolute; width: 200px; height: 30px; border: solid 1px #fff">
        <div style="top: -20px; left: 50%;cursor: move;" class="move"  onmousedown="beginResize('top',event)">&nbsp;</div>
        <div style="position: absolute; top: -5px; left: -5px;cursor: nw-resize;" class="corner" onmousedown="beginResize('topleft',event)">&nbsp;</div>
        <div style="top: -5px; right: -5px;cursor: ne-resize;" class="corner"  onmousedown="beginResize('topright',event)">&nbsp;</div>
        <div style="bottom: -5px; left: -5px;cursor: sw-resize;" class="corner"  onmousedown="beginResize('bottomleft',event)">&nbsp;</div>
        <div style="bottom: -5px; right: -5px;cursor: se-resize;" class="corner"  onmousedown="beginResize('bottomright',event)">&nbsp;</div>
        <div style="top: 50%; left: -5px;cursor: w-resize;" class="side"  onmousedown="beginResize('left',event)">&nbsp;</div>
        <div style="top: 50%; right: -5px;cursor: e-resize;" class="side"  onmousedown="beginResize('right',event)">&nbsp;</div>
        <textarea style="border: 0px; background: transparent; width: 200px; height: 30px; padding: 0px;">Some Text</textarea>
    </div>

    and including these CSS classes in your stylesheet:

    .corner{
position: absolute;
background: url('cornercircle.png') top left no-repeat;
width: 10px;
height: 10px;
}
.side{
position: absolute;
background: url('sidelines.png') top left no-repeat;
width: 10px;
height: 10px;
margin-top: -5px;
}
.move{
position: absolute;
background: url('topcirclewithline.png') top left no-repeat;
width: 10px;
height: 20px;
margin-left: -5px;
}

    Making the corners and sides actually resize the textbox is a slightly larger task, so I’ll leave that to you…

    UPDATE: The images are as follows:

    • cornercircle.png is a 10px x 10px transparent PNG of a circle, to be placed on the corners
    • sidelines.png is a 10px x 0px transparent png of two vertical lines, to be placed on the sides
    • topcirclewithline.png is a 10px x 20px transparent png of a circle with a line extending from it, to be placed above the box.
    • 0