title: How to make icon(position:absolute) clickabe inside a input[type file]?
body: <p>i want to create a image upload button, in which i can click the trash-icon to delete the uploaded image..</p>
  <p>But due to <code>position:absolute</code> of icon when i click on icon, its opens dialog box for file upload.</p>
  <p>Can i avoid this by using CSS
  i tried using <code>pointer-event:none</code> but couldn't succeed, Am using this in angular project</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>.upload-btn {
       width: 100%;
       height: 144px;
       background: #fff;
       border: 2px dashed #dae2e8;
       box-sizing: border-box;
       border-radius: 16px;
       background-image: url('https://customercare.igloosoftware.com/.api2/api/v1/communities/10068556/previews/thumbnails/4fc20722-5368-e911-80d5-b82a72db46f2?width=680&amp;height=680&amp;crop=False');
       background-repeat: no-repeat;
       background-position: center 27px;
       position: relative;
     background-size:30px;
  }
   .upload-btn .upload-text {
       font-size: 14px;
       position: absolute;
       left: 50%;
       bottom: 24px;
       transform: translateX(-50%);
       padding-left: 16px;
       padding-right: 16px;
       width: 100%;
       text-align: center;
  }
   .upload-btn .upload-img {
       position: absolute;
       left: 50%;
       top: 24px;
       width: 62px;
       height: 62px;
       border-radius: 8px;
       transform: translateX(-50%);
       pointer-events: none;
  }
   .upload-btn .upload-delete {
       position: absolute;
       right: 0;
       top: 15px;
       width: 62px;
       height: 62px;
       border-radius: 8px;
       pointer-events: none;
       text-align: right;
       background-color: transparent;
  }
   .upload-btn .upload-delete i {
       pointer-events: all;
       padding: 15px 17px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"&gt;
  &lt;div class="row row-24 mb-24"&gt;
    &lt;div class="col-4"&gt;
      &lt;label for="company-logo" class="form-label"&gt;Company                                      Logo&lt;/label&gt;
      &lt;label for="company-logo" class="upload-btn "&gt;
      &lt;div class="upload-text"&gt; Drop your image here or &lt;span class="text-primary"&gt;Browse&lt;/span&gt;&lt;/div&gt;
                              &lt;div class="upload-delete"&gt;
                                  &lt;i class="bi bi-trash"&gt;&lt;/i&gt;
                              &lt;/div&gt;
                              &lt;input type="file"  class="form-control" name="" id="company-logo" placeholder="" hidden&gt;
                          &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>