「：焦點」僞類在Chrome中不工作

我正在爲我的按鈕使用a：focus僞類（按下按鈕時）。它在Firefox上運行良好，但不會在Chrome中更改其狀態。有什麼解決方法嗎？「：焦點」僞類在Chrome中不工作

CSS：

.btn:focus { 
    box-shadow: 1px 1px 1px #586601 inset; 
    text-shadow: -1px -1px 1px #000000; 
}

（這是一類「BTN」輸入標籤）

來源

2012-11-05 catandmouse

一個按鈕就可以有一個重點是什麼？ –

是的，它可以..當它在Chrome中工作：[小提琴]（http://jsfiddle.net/RPdkk/1/），單擊文本框，然後按Tab鍵。 *按下時是什麼意思*？它與重點有什麼關係？ –

@MichalKlouda我沒有得到任何效果。 Chrome22/Win7 –

你需要:focus和:active區分，看documentation。

:focus選擇器用於選擇具有焦點的元素。

:active選擇器用於選擇和設置活動鏈接的樣式。

當您點擊鏈接時，鏈接將變爲活動狀態。

你應該改變你的風格來：

.btn:active, .btn:focus { 
    box-shadow: 1px 1px 1px #586601 inset; 
    text-shadow: -1px -1px 1px #000000; 
}

注：:active必須出現:hover後（如果存在）在CSS 定義，以便有效！

DEMO

來源

2012-11-05 08:10:36

哦，我不知道，因爲它在Firefox中表現不同。非常感謝。 ;）它現在正在工作。 – catandmouse

'：active'只在點擊過程中應用樣式，然後將其刪除：http://jsfiddle.net/HSWDc/1/ –

如果你想點擊後按鈕獲得焦點（鉻顯然不爲你做的），你可以做手工。使用jQuery：

$(".btn").on("click",function(){ 
    $(this).focus() 
}

小提琴：http://jsfiddle.net/HSWDc/

來源

2012-11-05 08:15:07

Chrome確實爲我着重，但Firefox沒有（使用純CSS）。使用Chrome時，焦點在按鈕上運行，而在Firefox上運行在錨點上。您的解決方案爲我做了竅門，現在在兩個瀏覽器中都可以使用。謝謝！ – jchn

嘗試以下操作：

-webkit-box-shadow: 1px 1px 1px #586601 inset; 
-moz-box-shadow: 1px 1px 1px #586601 inset; 
-webkit-text-shadow: -1px -1px 1px #000000; 
-moz-text-shadow: -1px -1px 1px #000000;

來源

2016-10-31 15:06:27

「：焦點」僞類在Chrome中不工作

回答

相關問題