Odaklanma Efektleri

Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 9 / 43.

:focus sözde sınıfı, bir öğe odaklandığında, örneğin öğeye tıkladığınızda veya klavyeyi kullanarak öğeye sekmeyle geçtiğinizde öğeyi biçimlendirmenizi sağlar. Etkileşimde bulunduğunuz öğeyi vurgulamanın harika bir yoludur! Örneğin:

<input type="text">

input odaklandığında style uygulayın:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Kullanıcı bu giriş alanına tıkladığında veya sekmeyle bu alana geçtiğinde, kenarlık rengi maviye dönüşecek ve etrafında hafif bir mavi gölge görünecektir.

Görev

Kolay

Odaklandığında bir metin girişine özel stil uygulayan bir CSS kuralı oluşturun.

Odaklandığında kenarlığı turuncu rgb(255, 152, 0) olarak değiştirir
Odaklandığında sarı bir arka plan rengi rgb(255, 243, 224) ekler

Kendin dene

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>