Problem description

Given an HTML page containing a label with the class .custom-radio that wraps a native radio input named option, a span element with the class .radio-mark, and the text “Option A’’ (and similarly for “Option B’’), write CSS to:

• Hide the native input[type="radio"].

• Style the .radio-mark as a 20px × 20px circle with a 2px solid border and 50% border-radius.

• Change the border-color of the .radio-mark to #4CAF50 when the radio is :checked.

• Use ::after on .radio-mark to draw a 10px × 10px filled circular dot at the center when :checked.

Goal

Write CSS rules to render two custom radio controls labeled “Option A” and “Option B”, where only the selected option shows a green border and inner dot.

Constraints

• Use only CSS (no JavaScript is allowed).

• .radio-mark size should be 20px by 20px.

• Border should be 2px solid #666, border-radius should be 50%.

• Checked border-color should be #4CAF50.

• Inner dot should be 10px diameter, centered, background-color should be #4CAF50, drawn via ::after.

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.