HTML5 / CSS3 - изменить внешний вид маркеров изменения размера

Question

Я не хочу полностью отключать изменение размера, но маркеры изменения размера в текстовых областях не соответствуют остальному стилю страницы.Есть ли способ, которым я могу изменить, как это выглядит, возможно, заменив его своим собственным изображением?Не должно быть обратной совместимости для браузеров, которые не поддерживают HTML5.

Answer 1

Я сделал это, обернув текстовую область в DIV, затем поместив элемент :: after в тот div, который содержит символ и имеет тот же цвет фона, что и текстовая область.

Важно дать элемент :: after "pointer-events: none;"потому что в противном случае пользователь не может щелкнуть по нему.Это работает во всех современных браузерах (http://caniuse.com/#feat=pointer-events).

.textarea_wrapper::after {
    pointer-events: none;
    content: "↓";
    font-size: 14px;
    position: absolute;
    height: 22px;
    width: 20px;
    text-align: center;
    bottom: 2px;
    right: -2px;
    background-color: #efefef;
    color: #777;
}

Вот скрипка: http://jsfiddle.net/herrfischerhamburg/59wy0ttj/7/

Answer 2

Это сложный вопрос. Нет способа стилизовать этот конкретный элемент управления. Даже если вы создадите другой вид под webkit, вы все равно получите чертову ручку изменения размера:

http://jsfiddle.net/qw73n/

Однако вы можете обойти это и поместить фоновое изображение в нижнем левом углу:

http://jsfiddle.net/q5kdr/

Но обработчик все равно появится поверх него.

Боюсь, единственной альтернативой является использование изменяемого размера jQuery UI:

http://jqueryui.com/demos/resizable/

Answer 3

Сделайте это так:

Поместите изображение в верхний правый нижний угол, где находится ручка по умолчанию!Абсолютное положение и т. Д.

Тогда на картинке задаются события-указатели: нет, и все готово!Это похоже на то, что указатель полностью игнорирует изображение, а события идут на самой текстовой области.

Ура!

ПРИМЕЧАНИЕ. Возможно, вам придется использовать изменение размера: вертикальное по отношению к текстовой области, поскольку поведение меняется от браузера к браузеру !!

СМОТРИТЕ ЭТО: https://jsfiddle.net/1bsoffu3/1/ a