how to change the resize property icon and the cursor on hover

user_3723197 0
Viewed 4567

I want to change the resize icon on the corner of bottom right of the following div (see the code snippet below) , i want also to change the cursor on hover (for instance the e-resize cursor)

enter image description here

I tried to add :

#resizableDiv::-webkit-resizer {
cursor:e-resize;
background-image: url(some_image.png);
}

but in vain, how can i achieve that, is it possible after all ?

#resizableDiv {
overflow:auto;
border:1px;
height:100px;
width:200px;
resize:horizontal;
display:inline-block;
background-color:yellow;
}
<div id="resizableDiv">
Resizable div for a single user working with Chrome
</div>

css html
1 Answers

Consider using an icon element in a separately nested element.
With a little help from a pseudo-element you will be able to achieve the intended behaviour, as the code snippet below demonstrates.

Code Snippet Demonstration: 

#resizableDiv {
  overflow:auto;
  border:1px;
  height:100px;
  width:200px;
  resize:horizontal;
  display:inline-block;
  background-color:yellow;
  position: relative; /* required */
}

/* Additional */

div#resizableDiv:after {
    content: "";
    resize: horizontal;
    bottom: 0;
    right: 0;
    cursor: e-resize;
    position: absolute;
    z-index: 9;
    width: 20px;
    height: 20px;
}

.resizeUI {
  position: absolute;
  bottom: 0;
  right: 0;
  background: inherit;
  padding: 0px 3px;
  pointer-events: none;
  cursor: e-resize;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="resizableDiv">
Resizable div for a single user working with Chrome
<div class="resizeUI"><i class="fa fa-arrows-h"></i></div>
</div>

user_52834760
Related