單擊改變input的邊框顏色


input邊框變色

 

今天布局頁面的時候發現設計稿多了一項要求,就是點擊input框的時候要求框框變色,以前沒有遇到過,平時很多時候都用的:hover這次想着一樣吧,看了之后發現不是想要的效果,hover是當鼠標觸及對象的時候就會發生改變,而我們需要的是點擊時候才發生改變,隨查了查發現此屬性focus記錄下來希望對大家有幫助!

   :focus 偽類在元素獲得焦點時向元素添加特殊的樣式

   注釋:IE 瀏覽器不支持此屬性。

說明

這個偽類應用於有焦點的元素。例如 HTML 中一個有文本輸入焦點的輸入框,其中出現了文本輸入光標;也就是說,在用戶開始鍵入時,文本會輸入到這個輸入框。其他元素(如超鏈接)也可以有焦點,不過 CSS 沒有定義哪些元素可以有焦點。

a:link {color: #FF0000}    
a:focus {color: #00FF00} 

注釋:偽類的名稱對大小寫不敏感。

注釋:偽類可與 CSS 類配合使用:

a.red:visited {color: #FF0000;} <a class="red" href="css_syntax.asp">CSS Syntax</a>

如果上面這個例子中的鏈接已被訪問過,那么它會顯示為紅色。

實例

規定獲得焦點的輸入字段的顏色:

input:focus { color:red; }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM