css - textarea光標(biāo)過大問題
問題描述
textarea里面直接方內(nèi)容,用背景的平鋪實(shí)現(xiàn)每行底部的下劃線,由于調(diào)節(jié)了行高,導(dǎo)致光標(biāo)過大(如圖),考慮到底部的下劃線,不能輕易改變行高,請問大神們,該怎么讓光標(biāo)顯示正常?
.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;
}
問題解答
回答1:這個是Chromium一個已知的bug,在2014年10月report。由于優(yōu)先級不高,遲遲沒有被修復(fù)。在2017年1月12日狀態(tài)改為fixed:
CARET: Caret height is incorrect from second wrapped line of text when line-height is set
我在最新的Chrome Canary(Version 58.0.2989.0)測試了一下,這個問題已經(jīng)被解決。所以預(yù)計(jì)在近期的Chrome新版本中這個問題將會被修復(fù)。
當(dāng)然一個更直接的辦法就是不使用textarea,用別的標(biāo)簽代替。這個具體就要看你的需求了。一個可能的辦法是用contenteditable屬性。例如:
<p contenteditable=“”>hello</p>
或者
<p contenteditable=“true”>hello</p>
這個屬性可以實(shí)現(xiàn)“可編輯”的效果,但是由于不是input,因而沒有.value等方法,而且輸入的內(nèi)容會轉(zhuǎn)化為html。另外,在某些移動端可能需要設(shè)置CSS:
[contenteditable] { user-select: text;}回答2:
這其實(shí)算是chrome的一個bug,firefox就不會。
非要這種樣式的話,我暫時能想到的就是自己模擬一個textarea,把原有的textarea隱藏,然后自己模擬光標(biāo)。
相關(guān)文章:
1. python - 編碼問題求助2. mysql - jdbc的問題3. 網(wǎng)頁爬蟲 - python 爬取網(wǎng)站 并解析非json內(nèi)容4. python - 數(shù)據(jù)與循環(huán)次數(shù)對應(yīng)不上5. 視頻文件不能播放,怎么辦?6. mysql - 如何減少使用或者不用LEFT JOIN查詢?7. 為啥最大化個窗口還得找一堆理由?8. python - 我在使用pip install -r requirements.txt下載時,為什么部分能下載,部分不能下載9. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處10. node.js - nodejs開發(fā)中常用的連接mysql的庫
