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 | 国产精品久久久久久久免费观看 | 欧美一区二区在线观看 | 日本精品一区二区三区视频 | 伊人网站在线观看 | 日本精品网站 | 三级成人片 | 国产一区二区三区在线免费观看 | 亚洲精品高清视频 | 日韩精品一区二区三区中文在线 | 日韩精品一区二区三区在线观看 | 精品福利一区二区三区 | 亚洲精品在线视频 | 精品国产一区二区三区性色av | 一级片在线观看 | 久久精品com | 亚洲精品综合一区二区 | 日韩中文字幕在线视频 | 亚洲激情综合网 | 九九热国产精品视频 | 2019中文字幕视频 | 午夜国产一级 | 日韩欧美专区 | 精品国产一区二区三区久久 | 日本久久网 | 一区二区视频在线 | 成人精品视频在线观看 | 夜夜艹 | 欧美日韩91 | 在线中文字幕亚洲 | 中文字幕精品视频在线观看 | 一区二区三区在线 | 国产精品一区二区久久 | 欧美成人一区二区三区 | 国产成人99久久亚洲综合精品 | 欧美日韩中文字幕 |