אפקטים בעת מיקוד

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 9 מתוך 43.

הפסאודו־מחלקה :focus מאפשרת לעצב רכיב כשהוא מקבל מיקוד, למשל כשאתם לוחצים עליו או עוברים בין רכיבים באמצעות המקש Tab. זו דרך נהדרת להדגיש את הרכיב שאתם מקיימים איתו אינטראקציה! לדוגמה:

<input type="text">

עצבו את שדה הקלט כשהוא מקבל מיקוד:

input {
  border: 2px solid #ccc;
}

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

כאשר המשתמש לוחץ על שדה הקלט הזה או עובר אליו באמצעות מקש Tab, צבע הגבול ישתנה לכחול ויופיע סביבו צל כחול עדין.

אתגר

קל

צור כלל CSS שמחיל עיצוב מיוחד על שדה קלט טקסט כשהוא מקבל מיקוד.

בעת קבלת מיקוד, משנה את הגבול לכתום rgb(255, 152, 0)
בעת קבלת מיקוד, מוסיף צבע רקע צהוב rgb(255, 243, 224)

נסו בעצמכם

<!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>