CSS > 讓輸入欄位發光

※ 簡記，僅供參考。

寫法

<style type="text/css"> 

 
/*美化輸入欄*/
input[type=text]:focus,input[type=password]:focus,input[type=checkbox]:focus,input[type=radio]:focus,textarea:focus,select:focus{
	outline:none;
 
	border-color:rgba(250,188,1,.75)!important;
	box-shadow:0 0 18px rgba(250,188,1,.5);
 
	-moz-box-shadow:0 0 18px rgba(250,188,1,.5);
	-webkit-box-shadow:0 0 18px rgba(250,188,1,.5);
}

</style>

修改重點

• rgba：這可以控制顏色，可用 RGB 紅綠藍的模式去調整。最後一個 a 則是指 Alpha，可以控制不透明的程度（＝控制透明度）。
• 18px：這會關係到餘光暈開的範圍，可以自由修改。數值越大，就暈(?)得越開。

效果

• 可以看 Twitter 的登入欄位，點下去就有發光的效果。關鍵就是上面這串。

個人觀感

• Chrome、Safari 暈開(?)的效果最好，其次 Firefox，Opera 最沒效果　囧

以下是本 Wiki 免費平台提供的廣告