首頁 > web前端 > css教學 > 利用css隱藏input的遊標方法

利用css隱藏input的遊標方法

小云云
發布: 2017-12-22 15:05:33
原創
4632 人瀏覽過

如何在不影響操作的情況下,把input的遊標隱藏了?在網路上搜尋了很多方式:用p模擬,設定readonly,設定disabled,設定自動blur等等方式,發現都無法滿足需求,於是最後終於找到了完美的方法。本文主要為大家介紹了關於如何利用css隱藏input遊標的相關資料,這是最近工作中遇到的一個需求,雖然看似不合理,但是有需要就要有解決的辦法,文中透過範例程式碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧。

方法如下:

首先隱藏遊標


  <style>
    input{
      color: transparent;
    }
  </style>
登入後複製

因為遊標是跟隨文字的,所以我們把文字的color設定為透明,遊標就不見了耶~

但是問題來了,文字都透明了要輸入框有啥用?別急,請往下看~

把文字給顯示出來


  <style>
    input{
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
  </style>
登入後複製

在input上設定text-shadow,文字是透明的但是我們可以用文字陰影來取代文字的顏色,這樣就完美解決囉。

text-shadow屬性

#語法:


#
text-shadow:x-offset y-offset blur color;
登入後複製

說明:

     x-offset:(水平陰影)表示陰影的水平偏移距離,單位可以是px、em或百分比等。如果值為正,則陰影向右偏移;如果值為負,則陰影向左偏移;

     y-offset:(垂直陰影)表示陰影的垂直偏移距離,單位可以是px 、em或百分比等。如果值為正,則陰影向下偏移;如果值為負,則陰影向上偏移;

     blur:(模糊距離)表示陰影的模糊程度,單位可以是px、em或百分比等。 blur值不能為負。如果值越大,則陰影越模糊;如果值越小,則陰影越清晰。當然,如果不需要陰影模糊效果,可以吧blur值設定為0;

     color:(陰影的顏色)表示陰影的顏色

相關建議:

############################################################## #####兩個JS實作Input裡新增小圖示的方法############input 屬性radio中設定checked 不生效的問題############ javascript input輸入框模糊提示功能詳解######

以上是利用css隱藏input的遊標方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板