HTML5/CSS3 - Modifica l'aspetto delle maniglie di ridimensionamento

Question

Non voglio disattivare completamente il ridimensionamento, ma le maniglie di ridimensionamento delle aree di testo non si adattano al resto dello stile di pagina. C'è un modo in cui posso cambiare il suo aspetto, magari sostituendolo con un'immagine mia? Non è necessaria la compatibilità con le versioni precedenti per i browser che non supportano HTML5.

Answer 1

Questo è un duro. Non c'è modo di definire questo controllo specifico. Anche se si forza un aspetto diverso in WebKit è ancora ottenere il maledetto maniglia di ridimensionamento:

http://jsfiddle.net/qw73n/

È possibile, tuttavia, il lavoro intorno ad esso e inserire un'immagine di sfondo nell'angolo in basso a sinistra:

http://jsfiddle.net/q5kdr/

Ma il gestore verrà comunque visualizzato sopra di esso.

temo l'unica alternativa sta usando jQuery UI ridimensionabile:

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

Answer 2

ho fatto questo avvolgendo textarea in un DIV, poi mettendo un :: dopo elemento in quel div che contiene un simbolo e ha lo stesso colore di sfondo della textarea.

È importante assegnare l'elemento :: after "pointer-events: none;" perché altrimenti l'utente non può cliccarci sopra. Funziona con tutti i browser moderni (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; 
} 

Ecco un violino: http://jsfiddle.net/herrfischerhamburg/59wy0ttj/7/

Answer 3

fare in questo modo:

Inserire un immagine in cima nell'angolo in basso a destra dove la maniglia di default è! Posizione assoluta ecc.

Quindi sul set di immagini puntatore-eventi: nessuno e il gioco è fatto! È come se il puntatore ignorasse completamente l'immagine e gli eventi vadano nella textarea stessa.

Saluti !!

NOTA: Forse è necessario ridimensionare: verticale nell'area di testo perché il comportamento cambia da browser a browser !!

vedere questo: https://jsfiddle.net/1bsoffu3/1/a