教你如何使用css隱藏input的光標(biāo)

URLOS 發(fā)布于2019-08-02 15:59 / 3374人閱讀

摘要：今天公司的突然跑過來問我一個問題如何在不影響操作的情況下，把的光標(biāo)隱藏了。

今天公司的ui突然跑過來問我一個問題：“如何在不影響操作的情況下，把input的光標(biāo)隱藏了？”。

我相信很多人會跟我一樣，覺得這是個什么狗屁需求，輸入框不要光標(biāo)這不是反人類嗎？可惜我們只是個小小的擼碼仔，沒有反駁的權(quán)利只能默默接受...

在網(wǎng)上搜索了很多方式：用div模擬，設(shè)置readonly，設(shè)置disabled，設(shè)置自動blur等等方式，發(fā)現(xiàn)都不能滿足需求，最后還是找到一位大神提供的方法完美解決。

首先隱藏光標(biāo)

因?yàn)楣鈽?biāo)是跟隨文字的，所以我們把文字的color設(shè)置為透明，光標(biāo)就不見了耶~
但是問題來了，文字都透明了要輸入框有啥用？別著急，請往下看~

把文字給顯示出來

在input上設(shè)置text-shadow，文字是透明的但是我們可以用文字陰影來代替文字的顏色，這樣就完美解決啦。

GPU云服務(wù)器云服務(wù)器 input光標(biāo) css如何使用如何使用css input html+css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/54473.html

相關(guān)文章

教你如何使用css隱藏input的光標(biāo)

摘要：今天公司的突然跑過來問我一個問題如何在不影響操作的情況下，把的光標(biāo)隱藏了。今天公司的ui突然跑過來問我一個問題：如何在不影響操作的情況下，把input的光標(biāo)隱藏了？。我相信很多人會跟我一樣，覺得這是個什么狗屁需求，輸入框不要光標(biāo)這不是反人類嗎？可惜我們只是個小小的擼碼仔，沒有反駁的權(quán)利只能默默接受... 在網(wǎng)上搜索了很多方式：用div模擬，設(shè)置readonly，設(shè)置disable...

bingchen 2019-08-29 13:58 評論0 收藏0
用Canvas實(shí)現(xiàn)文本編輯器（支持藝術(shù)字渲染與動畫）

摘要：項(xiàng)目中文字由進(jìn)行渲染。待觸發(fā)時，取消中文輸入標(biāo)記，將文字渲染到上。而其中一些有趣的細(xì)節(jié)實(shí)現(xiàn)如文本渲染，對中文筆畫分割實(shí)現(xiàn)有趣的動畫等并沒有描寫。導(dǎo)言目前富文本編輯器的實(shí)現(xiàn)主要有兩種技術(shù)方案：一個是利用contenteditable屬性直接對html元素進(jìn)行編輯，如draft.js；另一種是代理textarea + 自定義div + 模擬光標(biāo)實(shí)現(xiàn)。對于類似word的經(jīng)典富文本編輯器，...

OldPanda 2019-08-20 15:21 評論0 收藏0
CSS提高用戶體驗(yàn)的那些事

1. 選擇合適的鼠標(biāo)光標(biāo) 在有一些觸摸屏上我們可能需要隱藏鼠標(biāo)的光標(biāo)，比如說播放器的屏幕上，這種情形下隱藏鼠標(biāo)光標(biāo)能帶來性能方面的提升。使用cursor: none;可以達(dá)到隱藏鼠標(biāo)光標(biāo)的效果。對于一些舊的瀏覽器可能不支持這些新的光標(biāo)關(guān)鍵字，可以通過使用老的方式，用一張1 * 1 的透明GIF圖片，然后這樣做： video { cursor: url(transparent.gif)...

浠ラ箍 2019-08-29 12:20 評論0 收藏0
如何使用純 CSS 制作四子連珠游戲

摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對決這是一篇非常有趣的文章，作者詳細(xì)講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關(guān)鍵思想。序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對決！這是一篇非常有趣的文章，作者詳細(xì)講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...

I_Am 2019-08-02 16:05 評論0 收藏0