JavaScript doesn't apply on jQuery UI dialog

Question

   $("input, select, textarea")
        .addClass("ui-widget ui-widget-content ui-corner-all")
        .css({
            padding: ".2rem .5rem"
        });

So, I use the code above to display every input, select and textarea on my site in the same way as the elements I add using jQuery UI. This code is applied to every page on my site. It works fine and it adds the css and the classes to every input, select and textarea. Except on the input, select and textareas inside the dialog it doens't apply. I tried a lot of different things, but noting works. Anyone who knows how to do this? I could add the class manually but I have over 100 input fields spread over different dialogs

$(document).on("dialogopen", ".ui-dialog", function() {
  $(this).find("input, select, textarea")
    .addClass("ui-widget ui-widget-content ui-corner-all")
    .css({
      padding: ".2rem .5rem"
    });
});

$( ".myDialogClass" ).dialog({
  open: function() {
    $(this).find("input, select, textarea")
      .addClass("ui-widget ui-widget-content ui-corner-all")
      .css({
        padding: ".2rem .5rem"
      });
  }
});

I've tried both methods, but none of them worked

Answer 1

When I test with the following code, I seem to get the expected results.

$(function() {
  $("input, select, textarea")
    .addClass("ui-widget ui-widget-content ui-corner-all")
    .css({
      padding: ".2rem .5rem"
    });
  $(".myDialogClass").dialog({
    open: function() {
      $(this).find("input, select, textarea")
        .addClass("ui-widget ui-widget-content ui-corner-all")
        .css({
          padding: ".2rem .5rem"
        });
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="page">
  <h3>My Page</h3>
  <label>Input:</label> <input type="text">
  <label>Select:</label>
  <select>
    <option>Option 1</option>
  </select>
  <div class="myDialogClass" title="My Dialog">Some Text!
    <label>Dialog Input:</label> <input type="text">
  </div>
</div>

The Input element inside the Dialog shows the following classes and style.

<input type="text" class="ui-widget ui-widget-content ui-corner-all" style="padding: 0.2rem 0.5rem;">