Problem description

Given an HTML page with a <div> container and an <input type="search"> element inside it, write CSS to:

• Apply a frosted-glass effect with backdrop-filter: blur(6px) and a semi-transparent background.

• Round the input corners and add padding for comfortable typing.

• Remove default input borders and outlines, and add a subtle focus border.

Goal

Write CSS rules to style the search input as a glassmorphic component, and define a clear focus state to enhance usability.

Constraints

• Use only CSS (no JavaScript).

• Input width should be 100% of its container; container width can be hardcoded to 300px.

• Background should be rgba(255, 255, 255, 0.2).

• Backdrop blur radius should be 6px.

• Border-radius should be 12px.

• On focus, change border to 1px solid rgba(255, 255, 255, 0.6) and outline should be none.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.