html – Is there any way to style the resize button?

Question:

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            border: 1px solid #000000;
            resize: both;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

In the example above you can resize the div up and down or sideways, my question is if this button that is used to resize the div can be styled.

Answer:

You can use jQuery UI Draggable for this. Instead of using the resize: both; property resize: both; , you place an element styled however you like in the lower right corner of the div by draggable to it. As you move the element with the mouse, the div it's on is resized.

In the example below I put a red square span that simulates the resizing area of ​​the div:

$(function(){
   $("#draggable").draggable({
      drag: function(event, ui){
         
         var el = $(event.target);
         var el_width = el.width();
         var el_height = el.height();
         var div = el.parent();
         var div_width = div.width();
         var div_height = div.height();
         var div_padd_top = parseInt(div.css("padding-top"));
         var div_padd_right = parseInt(div.css("padding-right"));
         var div_padd_bottom = parseInt(div.css("padding-bottom"));
         var div_padd_left = parseInt(div.css("padding-left"));
         var hor = el_width - (div_width - ui.position.left + div_padd_left + div_padd_right);
         var ver = el_height - (div_height - ui.position.top + div_padd_top + div_padd_bottom);
   
         // evita redimensionamento se a div for menor que o span
         if(ui.position.left < el_width || ui.position.top < el_height){
            return false;
         }

         div.css({
            width  : div_width+hor+"px",
            height : div_height+ver+"px"
         });
         
      }
   });
});
div{
   width: 300px;
   height: 150px;
   border: 1px solid #000000;
   /* resize: both; REMOVIDO */
   overflow: hidden;
   position: relative;
   padding: 20px;
}

#draggable{
   width: 20px;
   height: 20px;
   bottom: 0;
   right: 0;
   background: red;
   display: inline-block;
   position: absolute;
   cursor: all-scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   <span id="draggable"></span>
</div>
Scroll to Top