如何為網頁創建彈出式文本區域

Question

我是HTML的新手，我必須為用戶輸入創建一個textarea ，看起來像下面的給定圖像。

請問有人對如何創建這種類型的textarea有想法嗎？

我只有創建簡單textarea基本知識。 提前致謝。

Answer 1

在這里演示

調整border-left border-right border-top寬度，以獲得合適的槽口設計

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;
}

Answer 2

嗨，您可以使用jquery ui創建一個對話框，其中包含供用戶輸入的textarea

檢查此鏈接以獲取演示http://jqueryui.com/demos/dialog/#modal-form

Answer 3

這是一個令人沮喪的textarea ，不支持偽元素。

還可以考慮使用box-shadow以獲得完整的效果。

演示