HTML5/CSS3 - Ändern Sie das Aussehen der Größenänderung

Ich nicht wollen, deaktivieren Sie die Größenänderung vollständig, aber an den Griffen auf Texteingabefelder passen nicht mit dem rest der Seite Stil. Gibt es eine Möglichkeit, die ich ändern kann, wie sieht es aus, vielleicht ersetzt es mit einem Bild meiner selbst? Es muss nicht mit rückwärts-Kompatibilität für Browser, die kein HTML5 unterstützen.

InformationsquelleAutor Fibericon | 2011-10-06
  1. 3

    Dies ist eine schwierige Frage. Es gibt keine Möglichkeit von styling dieses spezifische Kontrolle. Selbst wenn Sie zwingen, eine andere Erscheinung unter webkit-Sie erhalten immer noch die verdammte Größe Griff:

    http://jsfiddle.net/qw73n/

    Können Sie jedoch umgehen, und legen Sie ein Hintergrundbild in der linken unteren Ecke:

    http://jsfiddle.net/q5kdr/

    Aber der handler wird immer noch angezeigt, oben drauf.

    "Ich fürchte, die einzige alternative ist die Verwendung von jQuery-UI-resizable:

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

    InformationsquelleAutor methodofaction
  2. 8

    Ich machte dies, indem er die textarea in einem DIV, dann wird der Platzierung ein ::after element in das div, welches ein symbol und hat die gleiche Hintergrundfarbe wie die textarea.

    Es ist wichtig, um die ::after element "pointer-events: none;" denn sonst kann der Benutzer nicht auf Sie durch. Dies funktioniert in allen modernen Browsern (http://caniuse.com/#feat=pointer-events).

    HTML5/CSS3 - Ändern Sie das Aussehen der Größenänderung

    .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;
}

    Hier ist ein Turnschuh: http://jsfiddle.net/herrfischerhamburg/59wy0ttj/7/

    • Dieser hack funktioniert nur mit resizers in der unteren rechten Ecke der gleichen Größe wie das original-resizer.
    • Ja, es ändert sich nicht die resizer an alle, es legt einfach ein Bild über Sie und lässt zu, klicken Sie durch dieses Bild.
    InformationsquelleAutor Henning Fischer
  3. 0

    Machen Sie es wie diese:

    Platzieren Sie ein Bild auf der Oberseite der unteren rechten Ecke, wo der Standard Griff ist! Position absolute, etc.

    Dann auf das Bild setzen pointer-events: none, und Sie sind fertig! Es ist wie der Zeiger ignoriert vollständig das Bild und die Ereignisse gehen auf die textarea selbst.

    Prost!!

    HINWEIS: möglicherweise müssen Sie verwenden Sie Größe ändern: vertikal zu der textarea, da sich das Verhalten ändert sich von browser zu browser!!

    SEHEN: https://jsfiddle.net/1bsoffu3/1/ a

    InformationsquelleAutor geodoo
Schreibe einen Kommentar