文字数カウンター付きテキストエリア

<div class="d04-03-11-wrap">
          <span class="d04-03-11-label">お問い合わせ内容(200文字以内)</span>
          <textarea class="d04-03-11-area" maxlength="200" placeholder="内容を入力してください"></textarea>
          <div class="d04-03-11-count"><span class="d04-03-11-cur">0</span> / 200</div>
        </div>

.d04-03-11-wrap{width:min(280px,100%)}
        .d04-03-11-label{display:block;margin:0 0 8px;font-size:12px;color:#8a93a3}
        .d04-03-11-area{
          width:100%;box-sizing:border-box;padding:10px 12px;font-size:13px;min-height:70px;
          border:2px solid #d5d9e0;border-radius:8px;outline:none;resize:none;
          font-family:inherit;background:#fff;transition:border-color .2s;
        }
        .d04-03-11-area:focus{border-color:#4a6cf7}
        .d04-03-11-count{margin-top:6px;text-align:right;font-size:11px;color:#8a93a3}
        .d04-03-11-count.is-near{color:#d97706}
        .d04-03-11-count.is-full{color:#dc2626}

(function(){
        var area=document.querySelector('.d04-03-11-area');
        if(!area)return;
        var cur=document.querySelector('.d04-03-11-cur');
        var countEl=document.querySelector('.d04-03-11-count');
        area.addEventListener('input',function(){
          var len=area.value.length;
          cur.textContent=len;
          countEl.classList.toggle('is-near',len>=160&&len<200);
          countEl.classList.toggle('is-full',len>=200);
        });
      })();