Black Friday 2024: 25+ Ways to Save on Online Learning
How to Create an Expanding Search Bar Using -focus-within

How to Create an Expanding Search Bar Using -focus-within

Kevin Powell via YouTube Direct link

Intro

1 of 10
Next

1 of 10

Intro

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

How to Create an Expanding Search Bar Using -focus-within

Automatically move to the next video in the Classroom when playback concludes
  1. 1 Intro
  2. 2 Custom properties
  3. 3 Setting the height
  4. 4 Setting the input
  5. 5 Adding focus within
  6. 6 Testing
  7. 7 Margin left
  8. 8 Hover and focus state
  9. 9 Adding a background
  10. 10 Adding a cubic bezier

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.