Resizing CSS Custom Mouse Cursor

CSS to change the cursor style of the resize button on a textarea

This is rendered by the browser itself and is not part of HTML, therefore it cannot be styled via CSS.

Using external images for CSS custom cursors

It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px. See this page for more details.

Additionally, you also have to add in auto.

jsFiddle demo here - note that's an actual image, and not a default cursor.

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}

<div class="test">TEST</div>

How to get resize type of cursor when hovering on the border of the box?

Here, try this with a wrapping DIV that has the CSS for the hover.

.border {  background-color: red;  cursor: e-resize;  padding: 5px;}
.contents {  background-color: white;  cursor: default;  height: 100px;  line-height: 100px;  text-align: center;}

<div class="border"><div class="contents">  Hello World</div></div>

How to change cursor for resizable textarea?

This is rendered by browser itself cant be designed using css

How to reduce the size of image with cursor url?

Unfortunately you can't reduce the size of the cursor. You need to reduce the size of the image. 36 * 36 px is the recommended size.

Some more useful information here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property

CSS Change Each Cursor

The cursor values are overwriting each other. This means that the last value is the only one that works, as it is the last one to overwrite the cursor value.

The word that follows the URL is a fallback keyword. This means that if the image cannot be found or rendered, the cursor specified by the keyword will be drawn.

For example, with the property cursor: url("../.drive/system/visual/cursors/precision-select.cur"), crosshair;, the browser will attempt to draw the cursor specified in the URL, but if it cannot it will use the default crosshair cursor.

To get the browser to display different cursors you will need to specify the cursor for each element. For your default cursor you would have:

* {
    cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
}

To get a pointer over links you might then do:

a {
    cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
}

For crosshairs on a particular element you might try:

.target-element {
    cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}

You need to specify the cursor property for each element that you wish to have a changed/custom cursor. Using a universal selector for the default cursor ensures that you only specify the property for elements that require it.

---

Related Topics