如何利用css隱藏input的光標(biāo)示例代碼
我要評(píng)論前言
最近公司的ui突然跑過來問我一個(gè)問題：“如何在不影響操作的情況下，把input的光標(biāo)隱藏了？”。
我相信很多人會(huì)跟我一樣，覺得這是個(gè)什么狗屁需求，輸入框不要光標(biāo)這不是反人類嗎？可惜我們只是個(gè)小小的擼碼仔，沒有反駁的權(quán)利只能默默接受...
在網(wǎng)上搜索了很多方式：用div模擬，設(shè)置readonly，設(shè)置disabled，設(shè)置自動(dòng)blur等等方式，發(fā)現(xiàn)都不能滿足需求，最后還是找到一位大神提供的方法完美解決。
方法如下：
首先隱藏光標(biāo)
<style>
input{
color: transparent;
}
</style>
因?yàn)楣鈽?biāo)是跟隨文字的，所以我們把文字的color設(shè)置為透明，光標(biāo)就不見了耶~
但是問題來了，文字都透明了要輸入框有啥用？別著急，請(qǐng)往下看~
把文字給顯示出來
<style>
input{
color: transparent;
text-shadow: 0 0 0 #000;
}
</style>
在input上設(shè)置text-shadow，文字是透明的但是我們可以用文字陰影來代替文字的顏色，這樣就完美解決啦。
text-shadow屬性
語(yǔ)法：
text-shadow:x-offset y-offset blur color;
說明：
x-offset：（水平陰影）表示陰影的水平偏移距離，單位可以是px、em或者百分比等。如果值為正，則陰影向右偏移；如果值為負(fù)，則陰影向左偏移；
y-offset：（垂直陰影）表示陰影的垂直偏移距離，單位可以是px、em或者百分比等。如果值為正，則陰影向下偏移；如果值為負(fù)，則陰影向上偏移；
blur：（模糊距離）表示陰影的模糊程度，單位可以是px、em或者百分比等。blur值不能為負(fù)。如果值越大，則陰影越模糊；如果值越小，則陰影越清晰。當(dāng)然，如果不需要陰影模糊效果，可以吧blur值設(shè)置為0；
color：（陰影的顏色）表示陰影的顏色
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
CSS3表單input輸入框聚焦動(dòng)畫特效源碼 24種
本特效是一組效果超酷的表單input輸入框聚焦CSS3動(dòng)畫特效效果的代碼。這組特效共24種不同的聚焦動(dòng)畫效果，歡迎下載使用2016-04-26
CSS3實(shí)現(xiàn)input動(dòng)態(tài)輸入框特效源碼
CSS3實(shí)現(xiàn)input動(dòng)態(tài)輸入框特效源碼是一款當(dāng)鼠標(biāo)放在輸入框文字靠左排放輸入框變長(zhǎng)，文字靠右對(duì)齊輸入框不變。效果非常棒的動(dòng)態(tài)輸入框效果代碼。需要的朋友前來下載源碼2016-04-19
基于CSS3實(shí)現(xiàn)4種input元素滑塊UI樣式特效源碼
基于jQuery實(shí)現(xiàn)4種input元素滑塊UI樣式特效源碼是一款使用CSS3來渲染樣式，使用JavaScript來處理滑塊的鼠標(biāo)拖動(dòng)事件，代碼簡(jiǎn)單易懂，非常實(shí)用，有興趣的朋友一起看看吧2015-12-22
CSS3實(shí)現(xiàn)input按鈕樣式特效源碼
CSS3實(shí)現(xiàn)input按鈕樣式特效源碼是一款基于CSS3實(shí)現(xiàn)的input個(gè)性實(shí)用提交按鈕，可以使頁(yè)面更加豐滿。本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用2015-08-12使用CSS來擴(kuò)展增強(qiáng)Input Range的示例
這篇文章主要介紹了使用CSS來擴(kuò)展增強(qiáng)Input Range的示例,文中示例是一個(gè)跨瀏覽器的軌道滑動(dòng)樣式,需要的朋友可以參考下2015-08-04
CSS3實(shí)現(xiàn)的input輸入框藍(lán)光特效源碼
這是一款基于CSS3實(shí)現(xiàn)的input輸入框藍(lán)光特效源碼，是一款CSS3 transition過渡制作發(fā)藍(lán)光的input輸入框樣式代碼。當(dāng)輸入框獲得焦點(diǎn)時(shí)可呈現(xiàn)出發(fā)光的特效。2014-10-30CSS實(shí)現(xiàn)當(dāng)鼠標(biāo)移到input上時(shí)鼠標(biāo)變?yōu)椴豢奢斎氲臓顟B(tài)
用disabled或display=none 可實(shí)現(xiàn)表單不可輸入，但是這樣頁(yè)面并沒有變化，如果想讓鼠標(biāo)變成紅色的警告可以通過下面的方法來實(shí)現(xiàn)2014-05-21CSS樣式去除input和textarea點(diǎn)擊選中框
input和textarea點(diǎn)擊選中框很影響美觀，有什么方法可以將它去除掉呢？下面有個(gè)不錯(cuò)的方法，需要的朋友可以參考下2013-11-25- 給文本框添加背景其實(shí)很簡(jiǎn)單只要指定input的background-image樣式即可，下面有個(gè)不錯(cuò)的示例代碼，感興趣的朋友可以參考下2013-10-12
在input中右邊加上一個(gè)圖標(biāo)的css樣式
在input上加圖標(biāo)，想必大家并不陌生吧，下面為大家介紹下在input上右邊加上一個(gè)圖標(biāo)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-08-20
