How to change text-decoration to underline when hovering the a element, if the a element is below an-CodePudding

My goal is to create <input type=file> that is hidden. Then, use the a element to output Or choose your files.

The problem is:

When I hover over the text, the text won't be underlined.
The solution was, position: relative. Then, the text will be underlined when I hover over the text. However, when I click the text, it will not open the choose file window. Clicking outside the text will open the choose file window.

input[type=file] {
  opacity: 0;
  position: absolute;
}

a {
  text-decoration: none;
  position: relative;
}

a:hover {
  text-decoration: underline;
}

<input type=file>
Or
<a href="#">choose your files</a>

CodePudding user response：

Try this instead

#e-statement {
  display: none;
}

label:hover {
  text-decoration: underline;
  cursor: pointer;
}

label {
  color: blue;
}

Or <label for='e-statement'><input id='e-statement' type="file" name="e-statement">
  choose your files</label>