這篇文章主要給大家介紹了關於如何利用css隱藏input遊標的相關資料,這是最近工作中遇到的一個需求,雖然看似不合理,但是有需要就要有解決的辦法,文中透過CSS範例程式碼介紹的非常詳細,對CSS有興趣的朋友和需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧。
前言
最近公司的ui突然跑過來問我一個問題:「如何在不影響操作的情況下,把input的遊標隱藏了?
我相信很多人會跟我一樣,覺得這是個什麼狗屁需求,輸入框不要遊標這不是反人類嗎?可惜我們只是個小小的擼碼仔,沒有反駁的權利只能默默接受...
在網上搜尋了很多方式:用p模擬,設定readonly,設定disabled,設定自動blur等等方式,發現都無法滿足需求,最後還是找到一位大神提供的方法完美解決。
方法如下:
首先隱藏遊標
<style> input{ color: transparent; } </style>
#
<style> input{ color: transparent; text-shadow: 0 0 0 #000; } </style>
語法:
text-shadow:x-offset y-offset blur color;
#:
x-offset:(水平陰影)表示陰影的水平偏移距離,單位可以是px、em或百分比等。如果值為正,則陰影向右偏移;如果值為負,則陰影向左偏移; y-offset:(垂直陰影)表示陰影的垂直偏移距離,單位可以是px 、em或百分比等。如果值為正,則陰影向下偏移;如果值為負,則陰影向上偏移; blur:(模糊距離)表示陰影的模糊程度,單位可以是px、em或百分比等。 blur值不能為負。如果值越大,則陰影越模糊;如果值越小,則陰影越清晰。當然,如果不需要陰影模糊效果,可以吧blur值設定為0; color:(陰影的顏色)表示陰影的顏色##總結 以上就是本文的所有內容,希望可以帶給大家幫助! !
相關推薦:
css實作圖片橫向排列捲動效果css和js實作彈出登入居中介面教學以上是如何利用css隱藏input的遊標範例程式碼_CSS教學_CSS_網頁製作的詳細內容。更多資訊請關注PHP中文網其他相關文章!