添加陰影，文本框的onfocus

我要讓這種Pinterest的影響我的登記表上 - 當用戶集中在輸入文本字段或文本區域，我想這個領域或區域周圍有一個軟陰影，像這樣的：添加陰影，文本框的onfocus

enter image description here

所以我嘗試以下 - 我寫了一個CSS類

.inputShadow{ 
box-shadow:0 0 10px 5px #900; 
}

，並試圖與聚焦狀態添加它= 「addShadow（）」，其中這是addShadow（）功能：

function addShadow(){ 
    $(this).addClass("inputShadow"); 
}

但我沒有得到任何影子。然後我試過這個：

$(function(){ 
    $("input").onfocus("addClass","inputShadow"); 
});

也沒有結果。最後我試過這個：

$(function(){ 
    $("input").onfocus("css","box-shadow:0 0 10px 5px #900;"); 
});

但這並沒有幫助我。

任何想法如何使其工作？謝謝！

來源

2012-04-14 Igal

沒有測試過，但是這應該工作：

$(function(){ 
    $("input").on("focus",function(){ 
     $(this).addClass(".inputShadow"); 
    }); 
});

編輯：還要檢查瀏覽器的兼容性，如在其他答案

來源

2012-04-14 10:08:23 MrJD

非常感謝！工作出色！我還在Blur上添加了它，去除了陰影，一切正常！再次，謝謝！ – Igal 2012-04-14 10:21:49

沒問題，查看fox32的答案。它無需JavaScript，如果它起作用，它絕對是一個更好的選擇。 – MrJD 2012-04-14 10:23:36

是的，測試它，它的工作就像一個魅力！非常感謝你們！ :) – Igal 2012-04-14 10:35:05

你用什麼瀏覽器作爲mozilla和chrome瀏覽器有不同的css規則。

例如

.inputShadow { 
    -moz-box-shadow:0 0 10px 5px #900; 
    -webkit-box-shadow:0 0 10px 5px #900; 
    box-shadow:0 0 10px 5px #900; 
}

來源

2012-04-14 10:07:56 ncremins

謝謝您的輸入！是的，我知道這些問題，我的CSS也有主題，只是不想在此輸出太多信息。我使用最新的FF，並且我知道它支持box-shadow（在其他元素上試用過），所以我只是在這裏寫了上面的代碼。當然，我確實爲其他瀏覽器提供了其他規則。即使是真正老的IE - 'filter：progid：DXImageTransform.Microsoft.Shadow（Strength = 10，Direction = 0，Color ='＃900'）;':) – Igal 2012-04-14 10:28:46

無需使用jQuery這個任務提到的，你也可以只用css：

input:focus { 
    /* Your shadow css here */ 
    -moz-box-shadow:0 0 10px 5px #900; 
    -webkit-box-shadow:0 0 10px 5px #900; 
    box-shadow:0 0 10px 5px #900; 
}

但是creminsn是對的，box-shadow可能不適用於每一個眉毛ser，你需要添加一個瀏覽器特定的前綴。

來源

2012-04-14 10:12:54 Fox32

+1用於避免JavaScript – MrJD 2012-04-14 10:24:04

這是一個偉大的建議！非常感謝你！現在測試它，它效果很好！謝謝！！！ – Igal 2012-04-14 10:34:14

添加陰影，文本框的onfocus

回答

相關問題