HTML5/CSS3 - Cambiar el aspecto de los controladores de tamaño

Question

No quiero desactivar el cambio de tamaño por completo, pero los controladores de cambio de tamaño en las áreas de texto no se ajustan al resto del estilo de la página. ¿Hay alguna manera en que pueda cambiar su apariencia, tal vez reemplazándola con una imagen propia? No tiene que haber compatibilidad con versiones anteriores para los navegadores que no son compatibles con HTML5.

Answer 1

Esta es una pregunta difícil. No hay forma de diseñar este control específico. Incluso si se fuerza una apariencia diferente bajo webkit sigue recibiendo el controlador de tamaño importa:

http://jsfiddle.net/qw73n/

Puede, sin embargo, el trabajo alrededor de ella y colocar una imagen de fondo en la esquina inferior izquierda:

http://jsfiddle.net/q5kdr/

Pero el controlador seguirá apareciendo en la parte superior.

me temo que la única alternativa es usar jQuery UI de tamaño variable:

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

Answer 2

Hice esta envolviendo el área de texto en un div, a continuación, la colocación de un elemento :: después de que el div que contiene una símbolo y tiene el mismo color de fondo que el área de texto.

Es importante dar el :: elemento posterior "puntero-eventos: ninguno;" porque de lo contrario el usuario no puede hacer clic a través de él. Esto funciona en todos los navegadores modernos (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; 
} 

Aquí es un violín: http://jsfiddle.net/herrfischerhamburg/59wy0ttj/7/

Answer 3

hacerlo de esta manera:

colocar una imagen en la parte superior de la esquina inferior derecha, donde el mango por defecto es! Posición absoluta, etc.

Luego en la imagen, configure los eventos de puntero: ninguno y ¡listo! Es como si el puntero ignorara por completo la imagen y los eventos fueran al área de texto misma.

¡Salud!

NOTA: Tal vez tenga que usar resize: vertical al textarea porque el comportamiento cambia de un navegador a otro.

VER ESTO: https://jsfiddle.net/1bsoffu3/1/a