CSS - 焦點效果

CSS 焦點效果用於使表單元素（如輸入欄位、按鈕和連結）對與網頁互動的使用者更具動態性和吸引力。

CSS 中的:focus 偽類用於在元素獲得焦點（透過單擊或按 Tab 鍵）時對其進行定位。其目的是應用樣式或觸發特定行為以增強使用者體驗或提供額外的視覺反饋。

聚焦我！

:focus 是一個工具，可以使互動式元素更具動態性和吸引力，尤其是在使用者使用鍵盤導航時。

什麼是焦點偽類？

在 CSS 中，偽類 :focus 是一種選擇器，用於定位和設定當元素獲得焦點（通常透過鍵盤導航或滑鼠互動）時的樣式。
焦點效果主要用於表單欄位、按鈕等互動式元素，以便向用戶清楚地指示獲得焦點的元素。
焦點效果有助於為網站新增動態且引人注目的外觀，並提高可訪問性。

輸入欄位的 CSS 焦點效果

以下是如何在獲得焦點時設定輸入欄位樣式的示例

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .input-field {
            width: 80%; 
            height: 30px; 
            padding: 5px;
            margin: 10px 0;
            background-color: #f0f0f0; 
            border: 1px solid black; 
            font-size: 16px;
            outline: none;
        }
        .input-field:focus {
            border: 3px solid darkblue;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <input type="text" class="input-field" 
               placeholder="Enter your name" tabindex="0">
        <input type="text" class="input-field" 
               placeholder="Enter your email" tabindex="1">
        <input type="text" class="input-field" 
               placeholder="Enter your password" tabindex="2">
    </div>
</body>

</html>

帶有焦點效果的 CSS 按鈕

以下是如何在聚焦狀態下設定按鈕樣式的示例。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #ffffff;
            color: #228B22;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s, color 0.3s;
        }
        button:focus {
            background-color: #FFCC33;
            color: #ffffff;
            outline: none;
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <button> Focus on me! </button>
</body>
</html>

帶有焦點效果的 CSS 邊框

這是一個示例，它顯示了當元素獲得焦點時邊框是如何變化的

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding: 10px 20px;
            margin: 10px;
            background-color: #228B22;
            color: #ffffff;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
        }
        div:focus {
            border-radius: 20px;
            outline: none;
        }
    </style>
</head>

<body>
      <div tabindex="0"> Focus on me! </div>
</body>

</html>

帶有焦點效果的 CSS 盒陰影

這是一個示例，當 div 獲得焦點時會新增盒陰影

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            padding: 10px 20px;
            margin: 10px;
            background-color: #228B22;
            color: #ffffff;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
        }
        div:focus {
            box-shadow: 20px 20px 10px grey;
            outline: none;
        }
    </style>
</head>

<body>
    <div tabindex="0"> Focus on me! </div>
</body>

</html>

聚焦時的 CSS 樣式

這是一個示例，其中在聚焦時為按鈕添加了陰影效果

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 300px;
            overflow: hidden;
            display: grid;
            justify-content: center;
            align-items: center;
        }
    
        .glow {
            padding: 10px;
            width: 250px;
            height: 50px;
            border: none;
            outline: none;
            color: #fff;
            background: #111;
            cursor: pointer;
            position: relative;
            z-index: 0;
            border-radius: 20px;
        }
    
        .glow:before {
            content: '';
            background: linear-gradient(60deg, #ff0000, #ff7300, 
                                #fffb00, #48ff00, #00ffd5, #002bff, 
                                #7a00ff, #ff00c8, #ff0000);
            position: absolute;
            top: -4px;
            left:-4px;
            background-size: 400%;
            z-index: -1;
            filter: blur(15px);
            width: calc(100% + 6px);
            height: calc(100% + 6px);
            animation: glowing 20s linear infinite;
            opacity: 0;
            transition: opacity .3s ease-in-out;
            border-radius: 10px;
        }
    
        .glow:focus:before {
            opacity: 1;
        }
    
        .glow:after {
            z-index: -1;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #111;
            left: 0;
            top: 0;
            border-radius: 10px;
        }
    
        @keyframes glowing {
            0% { 
                background-position: 0 0; 
            }
            50% { 
                background-position: 400% 0; 
            }
            100% { 
                background-position: 0 0; 
            }
        }
    </style>
</head>

<body>
    <button class="glow" type="button" tabindex="0">
        FOCUS ON ME!
    </button>
</body>
</html>

列印頁面