CSS to Change the Cursor Style of the Resize Button on a Textarea

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.

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 do I disable the resizable property of a textarea?

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

To disable it for some (but not all) textareas, there are a couple of options.

You can use class attribute in your tag(<textarea class="textarea1">):

.textarea1 {
  resize: none;
}

To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>):

textarea[name=foo] {
  resize: none;
}

Or, using an id attribute (i.e., <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Quote by Sara Cope,
http://css-tricks.com/almanac/properties/r/resize/

JavaFX: Change cursor in Textarea

The reason why the solution doesn't work is answered here.
If CSS is not the option for you try this approach:

textArea.setId("idTextArea");// you can set also control id in fxml file
textArea.getScene().lookup("#idTextArea .content").setCursor(Cursor.DEFAULT);

Make sure that Scene object is initialized before running the code.

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

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>

Why cursor doesn't change on the button

You need to make these changes to the input:

1. Add cursor: pointer.
2. Add width: 100% and height: 100%.
3. Change font-size: 100px to font-size: 0.

.upload-btn-wrapper {

  position: relative;

  display: inline-block;

  overflow: hidden;

}

.btn {

  border: 2px solid gray;

  color: gray;

  background-color: white;

  padding: 8px 20px;

  border-radius: 8px;

  font-size: 20px;

  font-weight: bold;

}

.upload-btn-wrapper input[type=file] {

  font-size: 0;

  position: absolute;

  left: 0;

  top: 0;

  opacity: 0;

  cursor: pointer;

  width: 100%;

  height: 100%;

}

<div class="upload-btn-wrapper">

  <button class="btn">Upload a file</button>

  <input type="file" name="myfile" />

</div>

---

Related Topics