Problem description

Given an HTML page containing a label with the class .custom-file that wraps a file input and a span element with the class .button-text displaying “Choose File,’’ write CSS to:

• Hide the native file input element.

• Style the .button-text as a button of at least 120px × 40px with a blue background (#007BFF), white centered text, and 4px border-radius.

• Change the .button-text background to a darker blue (#0056B3) on hover.

Goal

Write CSS rules so that clicking the styled .button-text opens the file dialog and the control appears as a custom button with hover feedback.

Constraints

• Use only CSS (no JavaScript).

• .button-text minimum size should be 120px width, 40px height.

• Background-color should be #007BFF; hover background-color should be #0056B3.

• Text color should be #FFF, centered both horizontally and vertically.

• Border-radius should be 4px.

• Cursor should be pointer on hover.

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.