您現在的位置是:電腦技術吧?>? 基礎知識 ??>??文本框沒有旋轉按鈕,按顯示內容按鈕時文本框顯示??>??正文詳情

文本框沒有旋轉按鈕,按顯示內容按鈕時文本框顯示

拱迎天2019-11-22 16:21:47 人圍觀
簡介如何設置文本框的旋轉新技能轉移-嗶嗶嗶的搜索類型搜索框,設計師經常設計一個叉子圖標,表示用戶可以在很長時間后清除輸入。例如,這是一次很好的經歷!在現代瀏覽器中,Chr

新技能傳授-嗶嗶嗶嗶  search類型搜索框,設計師常常會設計一個叉叉圖標,表示用戶點之久可以清除輸入的內容。

比方說這個:

  這是不錯的體驗!  當前現代瀏覽器中,Chrome瀏覽器下type=search的輸入框會有清除按鈕的動態呈現,不過搜索input框尺寸不太好控制(padding無視);FireFox瀏覽器貌似任何類型的輸入框都無動于衷;IE10 瀏覽器貌似任何輸入框都會出現清除按鈕,但是長得略微粗糙了點,設計師同學接受不了。

  貌似不和諧了,咋辦?傳授個新技能,借助HTML以及CSS,來模擬清除按鈕可動態呈現的搜索框。

  如下CSS:  CSS Code復制內容到剪貼板  .input { padding: 5px; margin: 0; border: 1px solid #beceeb; }  .clear { display: none; position: absolute; width: 16px; height: 16px; margin: 6px 0 0 -20px; background: url(clear.png);}  .input::-ms-clear { display: none; }  .input:valid .clear { display: inline; }  如下HTML:  輸入任意內容:  XML/HTML Code復制內容到剪貼板  然后就有類似下面截圖的效果了(均截自FireFox瀏覽器):

  手摸為實,眼觀為虛。

您可以狠狠地點擊這里:CSS與文本框上清除按鈕顯隱Demo  實現原理  HTML部分  因為search類型文本框在Chrome/Opera/Safari下尺寸不好控制,因此使用缺省的類型(也就是text類型);  required是必要屬性,配合CSS偽類實現我們的效果。

  CSS部分  使用的是:valid偽類。

這是CSS3中新增偽類,IE10 以及其他現代瀏覽器支持,表示表單合法。

由于HTML中的有HTML5表單驗證屬性required. 于是,如果文本框沒有內容,則不合法;有內容,則合法,就會觸發這里的:valid偽類選擇器。

而這里:valid偽類控制后面的清除按鈕顯示,于是就實現了我們想要的效果。

  啊,對了。

IE11瀏覽器下不是所有的文本框都有黑色的叉叉嗎,會跟這里的自定義清除按鈕重疊,::-ms-clear { display: none; }這段代碼可以去之~~  更多偽元素改變表單控件默認樣式可以參考偽元素改變表單控件默認樣式一文。

  補充于翌日:來公司用IE11測了下,沒效果。

后發現,不是偽類不認識,而是兄弟選擇器的渲染bug. 通過修改透明度為01變化,鼠標hover清除按鈕位置,則按鈕出現或隱藏(見下面Gif)。

尚未發現什么奇淫技巧修復這個問題。

  評論有說mac下Chrome瀏覽器無法清除。

經自己測試,可以的。

如果意思是點擊關閉按鈕清除,確實CSS無能為力。

  實現的優點  此方法相比傳統JS實現的好處在于,更簡單了。

JS的話還要偵聽輸入事件(input)等,比較折騰。

CSS的話完全瀏覽器自身事件特性,顯然,高效簡單的多。

  實現的不足  不足在于,兼容性。

IE9-以下的瀏覽器只能點蠟燭了。

  不過,寫寫原型啊,demo;或者漸進增強使用;或者移動端開發等,都可以試試這個新技能。

  注意:點擊叉叉是不會清除的,本文只是輸入控制顯隱!!

版權聲明:本文由 拱迎天 整理編輯。

原標題:vb按鈕添加文本框,文本框

轉載注明出處:http://www.dn9ww09s.icu/basics/13971.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 控制面板找不到英偉達,英偉達控制面板從哪打開

    控制面板找不到英偉達,英偉達控制面板從哪打開 相關圖片nvidia控制面板必要嗎英偉達,也就是我們常說的英偉達,是一家著名的顯卡顯示芯片供應商,致力于開發能夠提升個人和專業計算平臺人機交互體驗的產品。NVIDIA控制面板是新一代NVID...

  • Flash動畫實例教程,做flash動畫

    Flash動畫實例教程,做flash動畫 相關圖片flash一分鐘動畫角色的行走是動畫中常見的場景,也是flash制作動畫時應該掌握的基本內容。在flash動畫中實現角色或其他角色的行走有三種方法:修補動畫、動作腳本和逐幀動畫修補f...

  • 商品兌換,兌換商品一般什么時候發貨

    商品兌換,兌換商品一般什么時候發貨 相關圖片步數寶兌換商品什么時候發貨點擊屏是一款非常好的購物軟件,用戶通過點擊屏購物可以賺取D幣,那么如何將D幣兌換成商品呢?下面,超人軟件編輯將介紹D幣兌換過程點擊D幣兌換教程...

  • 12306訂餐未送怎么退錢,如何使用12306訂餐

    12306訂餐未送怎么退錢,如何使用12306訂餐 相關圖片12306訂餐貴嗎你不喜歡吃方便面和盒飯當你坐子彈頭火車或高鐵?從下周起,12306將啟動應用程序訂購服務。那么如何訂購12306呢?現在,超人軟件編輯將為您介紹12306版iP12306訂餐入口...

  • html表單,html表單實例

    html表單,html表單實例 相關圖片html搜索表單!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Transitional//EN 1/DTD/XHTML l1 Transihtml表單源碼...

  • 天天練,瑜伽天天練好嗎

    天天練,瑜伽天天練好嗎 相關圖片手臂可以天天練嗎日常練習是一個非常好的閱讀和學習軟件。在這個軟件中,用戶可以體驗到對抗怪物的學習方法和升級模式。他們可以通過刷問題和沖刺排名來節省金幣。那么如何在...

  • 簡單網頁設計,簡單的網頁設計步驟

    簡單網頁設計,簡單的網頁設計步驟 相關圖片簡單網頁設計作品事實上,當今的網頁設計配色和色彩運用是一個非常有趣和值得思考的問題。雖然絕大多數網站看起來都很相似,但是巧妙地運用色彩會使平庸網站的布局顯得非同尋...

  • 電腦pdf怎么轉換成word,pdf轉word免費不限頁數

    電腦pdf怎么轉換成word,pdf轉word免費不限頁數 相關圖片pdf轉換成可編輯的word雖然PDF文件的閱讀效果比較好,但相信還是有很多小伙伴喜歡使用word文檔。那么如何將PDF轉換成word呢?接下來,超人軟件編輯器將介紹如何將PDF轉換為wopdf轉換成...

  • 解除百度云網速限制,電腦百度網盤下載網速慢

    解除百度云網速限制,電腦百度網盤下載網速慢 相關圖片百度賬號限速幾天恢復相信百度在線免費用戶已經發現,下載速度非常慢,甚至有時候只有幾十K,其實這是百度官方對大家的速度限制。那么百度在線磁盤下載速度是不是太慢了?接下...

  • 搖滾字體,搖滾字體設計

    搖滾字體,搖滾字體設計 相關圖片搖滾海報最終渲染如下:1。用你最喜歡的字體輸入一個200px大小的金色字符(我使用富超級歌曲),然后看一下下面的操作。2這是核心步驟,即應用震動變形的參數增量來產生巖石字體...

熱評文章

  • 2019淘寶天貓活動時間,淘寶全年活動時間表

    2019淘寶天貓活動時間,淘寶全年活動時間表 相關圖片天貓超市活動時間表暑假將至,天貓官方為所有用戶推出了2017天貓瘋狂夏季。那么,天貓的瘋狂夏季季節將在2017年什么時候開始呢?接下來,超人軟件編輯將介紹如何玩天貓Android天貓...

  • 雪花動畫,動畫雪花飄落

    雪花動畫,動畫雪花飄落 相關圖片flash制作雪花飄落動畫最終效果如下:1。以這張材料圖片為例,當然,你也可以自己畫一臺電視機:2。因為這張圖片是位圖,我們可以用魔杖來選擇電視中間的圖片作為選擇區域,并且...

  • 金盈 潘蔚林,金盈所

    金盈 潘蔚林,金盈所 相關圖片金盈所鄭永華金鷹辦公是一款功能非常強大的移動金融軟件。在這個軟件中,用戶可以獲得公開透明的金融服務,體驗不出家門的賺錢方式。那金英是什么?現在,超人軟件編輯將向您...

  • 硬盤裝系統,固態硬盤安裝系統

    硬盤裝系統,固態硬盤安裝系統 相關圖片新硬盤怎么裝系統最近,很多追求個性的小伙伴反映,他們很想知道如何設置win7硬盤的背景。然后,超人軟件將為您介紹win7系統硬盤后臺的設置方法。請不要錯過它1。弗斯特系統遷移...

  • 中外廣告差別,什么是好廣告

    中外廣告差別,什么是好廣告 相關圖片哪個國家的廣告好在網絡傳播領域,我一直在探索與用戶更好的溝通和信息傳遞!在解釋H5廣告與傳統廣告的區別的同時,筆者嘗試用一幅圖片來概括一種內容,讓看護者在形式看似簡單...

  • 派派是不是微信好友,派派新版本怎么刪通訊錄好友

    派派是不是微信好友,派派新版本怎么刪通訊錄好友 相關圖片有對方微信號怎么整人拍拍是一種植根于熟人的聊天和社交軟件。最近,在我的青春年華里,派派再一次受到關注。那么餡餅是如何欺騙朋友的呢?現在,超人軟件編輯將為大家介紹一...

  • 代碼示例文字英文,楔形文字

    代碼示例文字英文,楔形文字 相關圖片文愛示例文本隱慾效果說明:鼠標放在文本上,文本樣式會發生變化,如無下劃線、文本會閃爍等,結合其他樣式屬性,也可以實現按鈕式文本鏈接,效果如圖所示具體操作步驟:步驟...

  • 派派豬理財怎么樣,派派豬官網

    派派豬理財怎么樣,派派豬官網 相關圖片派派靠譜嗎怎么樣現在支付寶的收入越來越低,人們開始關注其他金融產品。他們中的一些人選擇了一種叫做餡餅的金融產品。派豬可靠嗎?讓我們與廣州下屬超人軟件站編輯派豬一起...

  • 打開軟件假死,頁面假死

    打開軟件假死,頁面假死 相關圖片應用程序假死最近,許多小伙伴報告說,當他們的win7系統計算機打開文件夾時,他們總是裝死。那么win7打開的文件夾的偽死呢?接下來,超人軟件將為您帶來一個解決方案,解決wi一打...

  • 網頁設計要注意什么,網頁設計需要什么

    網頁設計要注意什么,網頁設計需要什么 相關圖片網頁設計注意要點一。記住:你能控制的時間是有限的。我只能在4秒鐘內瀏覽普通網頁,所以你沒有足夠的時間吸引用戶并讓他們繼續瀏覽你的網站。也就是說,你應該盡可能準確地描...

關注微信

变脸官网查询