【CSS】:active（擬似クラス） - アクティブな状態

CSSの擬似クラスの１つ、activeについてご紹介します。

active

擬似クラスactiveは要素がクリックなどによるアクティブになった状態です。

基本構文

:active {
    プロパティ名: プロパティ値;
}

サンプル

次のサンプルコードは入力項目をクリックしている間（アクティブな状態）、枠線を赤色にします。

<style>
input:active {
    display: block;
    border: 1px solid red;
    outline: none;
}
</style>

<input type="text">