Style the file upload button without using javascript
<p>I am working on a website where the client <strong>does not want any javascript to be used</strong>. I have successfully styled the file update button for my website using the following piece of code.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label class="btn btn-default btn-file"&gt;
  Browse
  &lt;input type="file" style="display: none;"&gt;
&lt;/label&gt;</code></pre>
</div>
</div>
</p>

<p>However, once the file is selected, without using javascript I cannot show the file name next to the button like in the example below.</p>

<p><a href="https://i.stack.imgur.com/V2PGv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V2PGv.jpg" alt="enter image description here"></a></p>

<p>Any suggestions to do this using the browsers conventional upload button? </p>