怎麼把灼熱使用HTML5和CSS3

Question

我怎樣才能把煥發使用HTML5和CSS3的文本框的效果文本框活動時喜歡http://www.me.com

Answer 1

你會發現他們使用JavaScript的組合與CSS3來產生這種效果。

他們將有一個事件處理程序處理該文本框的onfocus狀態，然後使用CSS3 box-shadow風格伴隨着一個JavaScript淡入淡出效果，

最好的（最簡單的）的方式來實現，這將是jQuery的結合具有CSS3屬性，但也可以在原始JS中同時完成，如果您需要進一步解釋，請發表評論。

Answer 2

他們使用PNG圖像移動輸入字段後面的div，當沒有焦點時隱藏。一切都有固定的寬度和高度，所以不需要調整大小。

沒有看到任何CSS3或HTML5的存在，但與CSS3比邊界圖像做應該可以達到同樣的效果，是這樣的：

border-image: url("border.png") 10; 

編輯：

@Lea Verou有更好的解決方案。我昨天添加了這個效果，我的一個網站這樣

input:focus, textarea:focus, 
input.ieFocusHack, textarea.ieFocusHack { 
    box-shadow: 0 0 10px rgb(0, 182, 255); 
    -moz-box-shadow: 0 0 10px rgb(0, 182, 255); 
    -webkit-box-shadow: 0 0 10px rgb(0, 182, 255); 
    behavior: url(PIE.htc); 
} 

input[type="submit"]:focus { 
    box-shadow: none; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
} 

一些JavaScript（沒寫我自己）的IE瀏覽器，因爲它不支持：重點

$(document).ready(function() { 
    if (jQuery.browser.msie === true) { 
     jQuery('input, textarea') 
       .bind('focus', function() { 
         $(this).addClass('ieFocusHack'); 
       }).bind('blur', function() { 
         $(this).removeClass('ieFocusHack'); 
       }); 
    } 
}); 

要添加箱 - 對IE使用的影子支持使用CSS3PIE。奇蹟般有效。

Answer 3

:focus { box-shadow: 0 0 10px red; }發出紅光。基本上，輝光是具有合適顏色且沒有偏移的投影。