1027–File Selection Panel

Media Files

No media files provided.

Project Submission

+ Submit Assignment

Your submissions

Background

We want to style a file-selection panel by using the radio button. When any of the file is selected, the file selection is highlighted.

Requirement

Given the following HTML:

<ul>
  <li><input type='radio' name='file' id='file1'><label for='file1'>abc.png</label></li>
  <li><input type='radio' name='file' id='file2'><label for='file2'>doodle.html</label></li>
  <li><input type='radio' name='file' id='file3'><label for='file3'>progress.xls</label></li>
  <li><input type='radio' name='file' id='file4'><label for='file4'>sample.txt</label></li>
</ul>

Please add your CSS to implement the effect required.