Hide corner slashes of resize property but functionality should work

I have implemented the resize functionality using the following code. I need to get rid of that corner slashes while using the resize property but the functionality should work. can we achieve it?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}

<!-- language: lang-html -->

<div>
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

<!-- end snippet -->

With CSS

::-webkit-resizer selector - MDN

Unfortunately, Firefox - like many others - does not support this either, but currently it should work in all other modern browsers.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}

div::-webkit-resizer {
  display: none;
}

<!-- language: lang-html -->

<div>
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

<!-- end snippet -->

With JavaScript

If you want to hide the resize handle in all browsers, then as an alternative solution, you will need to implement your own logic to change the width of the element when it is clicked and dragged. Here's a short example to demonstrate how you can achieve this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Get Div
const resizableDiv = document.getElementById("resizableDiv");

// Add Event when MouseDown detected
resizableDiv.addEventListener("mousedown", function(event) {
  // If sub-element clicked, skip resize (try mousedown on <p>)
  if (event.target === resizableDiv) {
    event.preventDefault();
    resizeDiv(event); // resize
  }
});

// Resize
const resizeDiv = (event) => {
  // Destructuring the event object to get clientX and clientY
  const { clientX, clientY } = event;
  // Getting the computed width and height of the resizableDiv
  const { width, height } = getComputedStyle(resizableDiv);

  const resize = (event) => {
    // Calculating the new width and height based on the initial values and mouse movement
    const newWidth = parseInt(width, 10) + event.clientX - clientX;
    const newHeight = parseInt(height, 10) + event.clientY - clientY;

    // Applying the new width and height to the resizableDiv
    Object.assign(resizableDiv.style, { width: `${newWidth}px`, height: `${newHeight}px` });
  };

  const stopResize = () => {
    // Removing the event listeners when resizing is stopped
    document.documentElement.removeEventListener("mousemove", resize);
    document.documentElement.removeEventListener("mouseup", stopResize);
  };

  // Adding event listeners for mousemove and mouseup events
  document.documentElement.addEventListener("mousemove", resize);
  document.documentElement.addEventListener("mouseup", stopResize);
};

<!-- language: lang-css -->

div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  overflow: hidden;
  cursor: nw-resize;
}

div > * {
  cursor: initial;
}

<!-- language: lang-html -->

<div id="resizableDiv">
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

<!-- end snippet -->