av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁技術(shù)文章
文章詳情頁

css - textarea光標(biāo)過大問題

瀏覽:84日期:2023-01-24 17:46:41

問題描述

textarea里面直接方內(nèi)容,用背景的平鋪實(shí)現(xiàn)每行底部的下劃線,由于調(diào)節(jié)了行高,導(dǎo)致光標(biāo)過大(如圖)css - textarea光標(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)。

標(biāo)簽: CSS
相關(guān)文章:
主站蜘蛛池模板: 欧美日一区二区 | 祝你幸福电影在线观看 | 日本小电影在线 | 久久久网 | 日本综合在线观看 | 欧美另类视频在线 | 一区二区日韩 | 国产精品精品视频 | 欧美大片黄 | 国产高清精品在线 | 在线观看亚洲专区 | 亚洲 欧美 在线 一区 | 久久这里只有精品首页 | 欧美黄色一级毛片 | 成人在线观看免费 | 女同久久另类99精品国产 | 国产成人精品久久二区二区91 | 精品欧美一区二区精品久久久 | 超碰婷婷 | 在线超碰 | 99久久99热这里只有精品 | 亚洲视频免费在线看 | 精品国产视频在线观看 | 成人性视频免费网站 | 亚洲欧洲成人 | 九九热视频这里只有精品 | 国产精品一区二区三区在线 | 日韩在线免费观看视频 | 在线看国产 | 国产精品永久久久久久久www | 超碰日本 | 综合久久av| 国产一区二区三区免费 | 国产色网 | 国产精品视频一二三区 | 亚洲狠狠 | 色毛片| 日韩在线免费播放 | 日韩一级电影免费观看 | 亚洲人成在线播放 | 国产农村妇女毛片精品久久麻豆 |