CSS можно изменить стиль курсора кнопка resize на textarea в

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

мне кажется, что это должен быть указатель.

видя, что есть css для удаления или добавления инструмента изменения размера в textarea,

resize:none;

и css для изменения курсора всего текстового поля,

cursor:pointer;

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

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

10
css css3 cursor resize textarea

3 ответов

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

6

есть простой способ в 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":""}); })
16

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

0