CSS Cursor [not-allowed] Not Working In Chrome

Question

I have a table with input fields as the cells. There is an option to add rows and one to delete rows. I want the first row's delete button to not work. It is not clickable. It is faded out. Now I want on hover, there is a not-allowed cursor.

But it doesn't work!

.clonable .del{pointer-events: none;
 opacity: 0.5;
    cursor: not-allowed;  
    cursor: -moz-not-allowed;
    cursor: -webkit-not-allowed;
}

  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Merchant</th>
        <th>Type</th>
        <th>Source</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr class="clonable">
        <td><input type='text' name='des1' required></td>
        <td><input type='data' name='d1' required></td>
        <td><input type='number' step='0.01' min='0' name='a1' required></td>
        <td>
          <select name='m1' required id='m'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($merch)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='t1' required id='t'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($type)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='s1' required id='s'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($source)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td><button class='del'>Delete</td>
    </tr>
    </tbody>
  </table>

JS CODE

$(document).on("click", ".del", function() {$(this).closest('tr').remove();}

Answer 1

The issue is that you are setting pointer-events: none; on the button. An element with pointer-events: none will not take part in pointer events but also will not change the cursor or state (see: https://css-tricks.com/almanac/properties/p/pointer-events/).

Removing the pointer-events: none; and disabling the button works fine:

$(document).on("click", ".del", function() {$(this).closest('tr').remove();})

.clonable .del{
    opacity: 0.5;
    cursor: not-allowed;  
    cursor: -moz-not-allowed;
    cursor: -webkit-not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Merchant</th>
        <th>Type</th>
        <th>Source</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr class="clonable">
        <td><input type='text' name='des1' required></td>
        <td><input type='data' name='d1' required></td>
        <td><input type='number' step='0.01' min='0' name='a1' required></td>
        <td>
          <select name='m1' required id='m'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($merch)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='t1' required id='t'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($type)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td>
          <select name='s1' required id='s'>
            <option value='' disable selected>Select One</option>
            <?php
          while($row = mysqli_fetch_assoc($source)){
          foreach($row as $value){
          echo "<option value='$value'>$value</option>";}}
          ?>
          </select>
        </td>

        <td><button class='del' disabled='true'>Delete</td>
    </tr>
    </tbody>
  </table>