Как изменить курсор для изменяемого размера текстовой области? - PullRequest
1 голос
/ 14 марта 2019

У меня есть элемент HTML textarea с определенным правилом CSS { resize: both }.В FF, когда пользователь наводит курсор мыши на правый нижний угол textarea, курсор изменяется в соответствии со значением свойства resize, но в Chrome курсор не изменяется.

Пожалуйста, откройте этот пример в FF и Chrome, чтобы проверить разницу.

Это ошибка Google Chrome, и могу ли я исправить ее с помощью CSS на моей стороне?

Обновление

Я сообщил об ошибке в Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=942017

Ответы [ 2 ]

1 голос
/ 14 марта 2019

На самом деле, есть или, по крайней мере, были способы, которыми вы могли бы стилизовать изменение размера и добавить cursor: se-resize; при наведении курсора.Прочтите этот пост: Могу ли я применить стиль для захвата изменения размера textarea?

В нем описывается, как можно использовать ::-webkit-resizer для стилизации изменяемого размера:

::-webkit-resizer {
    border: 2px solid black;
    background: red;
    box-shadow: 0 0 5px 5px blue;
    outline: 2px solid yellow;
}

К сожалениюон перестал работать в Chrome, и я не мог ничего подобного.(Я думаю, что это все еще работает в Safari).

Но не бойтесь, не сложно сделать собственную ручку.На самом деле, я бы посоветовал вам использовать пользовательский, так как по умолчанию он слишком мал и его трудно ударить.Особенно на ощупь.На самом деле существует множество сайтов, которые используют собственные дескрипторы (или, по крайней мере, автоматические средства изменения размера, которые растут в зависимости от содержимого. Также отлично работает на ощупь!).

Т.е.Stackoverflow использует пользовательский дескриптор (TextAreaResizer):

GIF дескриптора изменения размера Stackoverflows

Для этой цели также есть множество библиотек, просто выполните поиск в Google иВы найдете то, что работает для вас:)

0 голосов
/ 14 марта 2019

Это делается самим браузером и не может быть спроектировано с использованием CSS

...