Изменение положения углока resize

221

27 сентября 2018, 03:40

Есть блок со свойством resize: both.

Так вот, как изменить положение этого уголка? (нужно вверху справа).

Гуглил, нашёл только информацию о том, что его положение можно изменить на снизу слева, свойством direction: rtl;.

Answer 1

Как вариант, использовать jQuery UI:

$( "#resizable" ).resizable();

@import url(https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css); 
 
.ui-widget-content { 
  padding: 1rem; 
  background: #333 !important; 
  color:#fff !important; 
} 
.ui-icon,  
.ui-widget-content .ui-icon { 
  top: .5rem; 
   
  top: 5px; 
  right: 5px !important; 
   
  background-image: url(https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-resize-11.png&r=255&g=255&b=255) !important; 
   
  background-position: 0px 0px !important; 
  background-size: cover; 
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
   
<div id="resizable" class="ui-widget-content"> 
  <h2>Resize Content</h2> 
   
  <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, error. 
  </p> 
</div>