1. 程式人生 > >css偽類之input輸入框滑鼠點選邊框變色效果

css偽類之input輸入框滑鼠點選邊框變色效果

css相關,滑鼠點選<input>輸入域後出現有顏色的邊框

.problem input:focus{
    border-style:solid;
    border-color: #03a9f4;
	box-shadow: 0 0 15px #03a9f4;
}

css相關,滑鼠點選<input>輸入域後出現有顏色的邊框


效果如下:

進行更多交流

微信掃描關注“公眾號”


相關推薦

cssinput輸入滑鼠邊框變色效果

css相關,滑鼠點選<input>輸入域後出現有顏色的邊框 .problem input:focus{ border-style:solid; border-color: #03a9f4; box-shadow: 0 0 15px #03a9f

input文字 滑鼠預設消失,不輸入離開滑鼠恢復預設值

需要使用js進行處理 onfocus="if(value=='初始值'){value=''}"   onblur="if(value==''){value='初始值'}"   例子:給新增頁面賦予初始值0,點選後0消失,無須把0刪除,能正常填寫內容 &n

input文字 滑鼠預設值消失,不輸入離開滑鼠恢復預設值

1.input: <input name="textfield" type="text" value="點選添入標題" onfocus="if (value =='點選添入標題'){value

CSS選擇器active模擬JavaScript事件

一、說明 設定元素在被使用者啟用(在滑鼠點選與釋放之間發生的事件)時的樣式。 IE7及更早瀏覽器只支援a元素的:active,從IE8開始支援其它元素的:active。 另:如果需要給超連結定義:訪問前,滑鼠懸停,當前被點選,已訪問這4種偽類效果,而又沒有按照一致的書寫順

css基礎 border 修改Input輸入的邊線

且行且珍惜 blog block ide alt www order gpo ott 禮悟:   公恒學思合行悟,尊師重道存感恩。葉見尋根三返一,江河湖海同一體。 虛懷若谷良心主,願行無悔給最苦。讀書鍛煉養身心,誠勸且行且珍惜。   

css實現發光的input輸入

none 兼容 charset ima 瀏覽器兼容 bubuko margin oct info 效果圖截圖: 案例代碼示下: <!DOCTYPE html> <html> <head> <meta ch

CSS選擇器active模擬JavaScript擊事件

css一、說明設置元素在被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式。IE7及更早瀏覽器只支持a元素的:active,從IE8開始支持其它元素的:active。另:如果需要給超鏈接定義:訪問前,鼠標懸停,當前被點擊,已訪問這4種偽類效果,而又沒有按照一致的書寫順序,不同的瀏覽器可能會有不同的表現。超鏈

Jquery滑鼠變色另一個按鈕顏色還原

轉載一個! Jquery滑鼠點選後變色,點選另一個按鈕顏色還原 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

input輸入制定輸入數據型匹配

wid value pri tex logs key 匹配 type style <input type="text" id="price_169" value="97" style="max-width: 50px;" onkeyup="value=value

input輸入限制錄入

name d+ event after 字母 paste lac onkeyup text 輸入大小寫字母、數字、下劃線:<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,‘‘);"

使用css,實現同類型複計數的效果

開始啦 最近發現一個css的小技巧。在以往,當我想要獲取checkbox的資料數量的時候,常規的做法是使用js遍歷checkbox陣列,定義變數達到統計數量的效果。現在使用css完全可以實現相同的效果,簡單便捷,在不操作DOM的情況下達到目的,嘻嘻 程式碼塊 這裡貼出相

input輸入實現好看的複效果css+jq)

做畢設果然是道阻且長QAQ,在用到一個複選框的時候由於嫌棄複選框實在太醜了,就自己做了一個。其中沒有用到任何圖片,用css和jQuery實現。 廢話不多說直接看最後效果: html元素的設計如下

css input 輸入背景透明

INPUT 背景色設定為透明   BACKGROUND-COLOR: transparent; 例如: <input nam="" style="BACKGROUND-COLOR: tra

U3D Input鍵位輸入GetKey

tle cti 3.2 sta 詳細 row u3d engine 內容   Input類中包含許多屬性和方法,下面介紹一下和鍵盤輸入有關的內容 一、有關接收鍵盤信息的屬性 屬性名 類型 屬性類型 含義 anyKey bool get 當前是否按住任意鍵或鼠標按鈕

如何用jquery動態改變 input 輸入的readonly屬性及CSS樣式

樣例  <style type="text/css"> .disable{background-co

input輸入手機號碼344顯示

keycode cti inpu 手機 fun length blog temp clas // 手機號碼3/4/4顯示 $(‘.section .inp‘).eq(0).on(‘keyup‘,function (e)

input輸入的背景圖片也可以這樣玩

lis osi url ges 圖片 per ack icon -s > .time-bgimg01 { background-image: url(‘../../images/personal/carlist/timeIcon.png‘); background

CSS的理解

沒有 :hover itl 用法 .... title hover 通過 cnblogs 因為之前一直對css偽類沒有過多的了解,在網上看到一段css代碼,不能理解 a:hover span.title{ color:red; ......... } 現通過

CSS 元素

www [ ] 選擇 sad 第一個 一次 進行 clas before CSS的元素選擇器除了根據id(#)、class(.)、屬性([ ])選取元素以外,還有很重要的一類,就是根據元素的特殊狀態來選取元素。它們就是偽類和偽元素。跟id選擇器、類選擇器、屬性選擇器以及派生

關於微信手機端IOS系統中input輸入無法輸入的問題

inpu input mil net 手機端 family 輸入 tails 覆蓋 把-webkit-user-select:none改成-webkit-user-select:auto;覆蓋掉或者直接註釋掉就行! 別人家的博文:http://blog.csdn.net