CODEWITHSUNDEEP
javascriptjqueryhtml
Sandeep
Sandeep

Reputation: 723

How to create popup type textarea for webpage

I am new in HTML, and i have to create one textarea for user input which is looking like the given image below.

Please does anyone have an idea on how to create this type of textarea?

I have only basic knowledge of creating simple textarea. Thanks in advance. enter image description here

Upvotes: 0

Views: 378

Answers (3)

bookcasey
bookcasey

Reputation: 40473

It's a bummer textarea doesn't support pseudo elements.

Also consider using box-shadow to get the full effect.

Demo

Upvotes: 0

savy
savy

Reputation: 164

Hi you can use jquery ui to create dialog which contains textarea for user input

check this link for demo http://jqueryui.com/demos/dialog/#modal-form

Upvotes: 0

Anupam
Anupam

Reputation: 8016

Demo here

Play around with border-left, border-right and border-top widths to get suitable notch design

HTML

<textarea></textarea>

<div id="notch"></div>

CSS

textarea{
    width:300px;
    height:80px;
    border:1px solid #7c7870;
    background:#7c7870;
    color:#fff;
      border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
   }

#notch{
    position: relative;
    top:-4px;
    left: 200px;
    margin: 0;
    border-bottom: 0;
    border-left: 30px solid transparent;
    border-right: 10px solid transparent;
    border-top: 40px solid #7c7870;
    padding: 0;
    width: 0;
    height: 0; /* ie6 height fix */
    font-size: 0;
    line-height: 0; /* ie6 transparent fix */
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
    z-index:99;
}

Upvotes: 5

Related Questions