Problem description

Given an HTML page with a <input class="accessible-input" type="text" placeholder="Your name">, write CSS to meet the following requirements:

• When the input is :focus (for example, using the Tab key), it should display a clear, visible box-shadow.

• The box-shadow must be 0 0 0 3px rgba(38, 132, 255, 0.5) (a soft blue glow).

• The default browser outline should not appear; only your custom box-shadow should show.

Goal

Ensure the input field has a custom, visually clear focus indicator to make navigation and form completion accessible to keyboard users.

Constraints

Do not use JavaScript or change HTML structure.

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.