css - textarea光标过大问题

Question

textarea里面直接方内容，用背景的平铺实现每行底部的下划线，由于调节了行高，导致光标过大（如图），考虑到底部的下划线，不能轻易改变行高，请问大神们，该怎么让光标显示正常？

.textarea{

display: block;
width:100%;
-webkit-box-flex:1;
overflow-y:scroll;
font-size:.24rem;
border:none;
resize: none;
background: #fff;
outline: none;
color: #555555;    
box-shadow: 1px 1px 0 #d2d2d2;
line-height: 50px;
margin: 1px auto;
padding: 0 20px;
background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#d2d2d2 0); 
background-size: 100% 50px;

}

Answer 1

這是Chromium一個已知的bug，在2014年10月report。由於優先順序不高，遲遲沒有被修復。在2017年1月12日狀態改為fixed：

CARET: Caret height is incorrect from second wrapped line of text when line-height is set

我在最新的Chrome Canary(Version 58.0.2989.0)測試了一下，這個問題已經被解決。所以預計在近期的Chrome新版本中這個問題將會被修復。

當然一個更直接的辦法就是不使用textarea，用別的標籤代替。這個具體就要看你的需求了。
一個可能的辦法是用contenteditable屬性。例如：

<p contenteditable=“”>hello</p>

或

<p contenteditable=“true”>hello</p>

這個屬性可以達到「可編輯」的效果，但由於不是input，因而沒有.value等方法，而且輸入的內容會轉換為html。另外，在某些行動端可能需要設定CSS：

[contenteditable] {
    user-select: text;
}

Answer 2

這其實算是chrome的一個bug，firefox就不會。

非要這種樣式的話，我暫時能想到的就是自己模擬一個textarea，把原有的textarea隱藏，然後自己模擬遊標。