CSS для изменения стиля курсора кнопки изменения размера текстовой области

Question

Я заметил, что кнопка изменения размера в моей текстовой области при наведении и / или щелчке остается стрелкой.

Мне кажется, это должен быть указатель.есть CSS, чтобы удалить или добавить инструмент изменения размера текстовой области,

resize:none;

и CSS, чтобы изменить курсор всей текстовой области,

cursor:pointer;

, но, похоже, чтопараметр css для управления курсором только кнопки изменения размера.Я немного осмотрелся и, похоже, не могу найти собственность.Я могу придумать несколько способов сделать это в javascript или jquery, но кажется излишним.

Так есть ли способ установить курсор только для кнопки изменения размера текстовой области через css?

Answer 1

В jQuery есть простой способ решить эту проблему.

<script type="text/javascript">
    $(function() {
        $(document).on('mousemove', 'textarea', function(e) {
            var a = $(this).offset().top + $(this).outerHeight() - 16,  //  top border of bottom-right-corner-box area
                b = $(this).offset().left + $(this).outerWidth() - 16;  //  left border of bottom-right-corner-box area
            $(this).css({
                cursor: e.pageY > a && e.pageX > b ? 'nw-resize' : ''
            });
        })
    });
</script>

См. jsFiddle

Одна строка

$(document).on('mousemove', 'textarea', function(e) { var a=$(this).offset().top+$(this).outerHeight()-16,b=$(this).offset().left+$(this).outerWidth()-16;$(this).css({cursor:e.pageY>a&&e.pageX>b?"nw-resize":""}); })

Answer 2

Это отображается самим браузером и не является частью HTML, поэтому его нельзя стилизовать с помощью CSS.

Answer 3

Вы можете использовать CSS-свойство курсора для псевдоэлемента элемента ": after":

#block{
  display: block;
  width:150px;
  height:100px;
  border: solid black 1px;
  background: red;
}

.resizable{
  resize: both;
  overflow:auto;
  position:relative;
}

.resizable:after{
  content:"";
  position: absolute;
  bottom: 0;
  right:0;
  display:block;
  width:8px;
  height:8px;
  cursor: nwse-resize;
  background-color: rgba(255,255,255,0.5)
}

<div id="block" class="resizable"></div>

(Я поместил полупрозрачный белый цвет фона в псевдоэлемент: after, чтобы вы могли видеть его положение и размер, но вы могли бы сделать его невидимым)

Answer 4

Это функция браузера ... для этого нет стилей. Некоторые браузеры даже не отображают углы изменения размера в текстовой области. К сожалению, это, вероятно, не может быть изменено в данный момент.