這裡是一個輸入框，裡面有提示文字的同時，還有一個小圖示。這裡我的做法是使用一個父元素包裹住文字框，利用父級元素的背景圖片來完成小圖示的實現。提示文字部分則使用文字框的placeholder來解決。

參考程式碼如下：

HTML部分：

<div class="search-input">
    <input type="text" placeholder="寫下備註">
</div>

CSS部分：

.search-input {
    width: 718px;
    margin: 41px auto 0;
  }
  .search-input textarea {
    width: 718px;
    height: 148px;
    border: 1px solid #CCCCCC;
    border-radius: 100px;
    font-size: 18px;
    color: #333;
    line-height: 48px;
    text-indent: 48px;
    letter-spacing: -0.43px;
    outline: none;
    background: #FFFFFF url("../../icons/問題.svg") no-repeat 17px center;
  }
 

這裡還有一個重要的地方就是對提示文字大小，字型，顏色，縮排程度的設定，這裡需要使用到的CSS樣式為：（注意相容）

::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 18px;
    color: #CCCCCC;
    text-indent: 48px;
  }

  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 18px;
    color: #CCCCCC;
    text-indent: 48px;
  }

  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 18px;
    color: #CCCCCC;
    text-indent: 48px;
  }

  :-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size: 18px;
    color: #CCCCCC;
    text-indent: 48px;
  }