Umrandung von Input Feldern wie Safari

  • klaudschv hat das Userstyle gelöscht (oder genauer gesagt, durch ein anderes ersetzt) und sich bei mir entschuldigt.
    Es war wohl tatsächlich keine Absicht, meinen Code ohne die Angabe, dass ich der Autor von diesem Code bin, zu nutzen.

    Damit hat sich die Sache für mich erledigt.

  • ich wollte passend zu deinem userstyle der ja auch das aussehen der input felder ändert (von 3d mit schatten zu 2d ohne schatten) auch die buttons haben. deshalb hab ich einfach bei

    Code
    input/*:not([type="submit"]):not([type="reset"]):not([type="button"])*/:not([type="checkbox"]):not([type="radio"]),

    die buttons ausgeblendet.

    auf manchen seiten ist mir jetzt aber aufgefallen, dass input felder und buttons aber so ausschauen: [Blockierte Grafik: http://img3.imagebanana.com/img/l893b55/thumb/screen.png]

    mit aktiviertem style werden sowohl felder als auch buttons beschnitten. ka. warum es kommt auch nur auf einigen vor...

    vielleicht weißt du ja warum?!

    grüße

  • Wenn bei irgendeinem Inputfeld-Skript der überall gilt, die Textgröße größer als 11px (Standard) eingestellt ist wird der untere Rand der Zeichen abgeschnitten wie im Screen dargestellt.

    In diesem Fall:
    input {
    /*font-size: 12px !important; /*wenn höher als 11px*/
    padding : 0 1px !important; /*Neu hinzu*/
    }

    Vieleicht hilft`s ja.

    Gruß ReVox
    "Theorie ist, wenn man alles weiß und nichts geht. Praxis ist, wenn alles funktioniert und nicht weiß warum.
    Bei Windows sind Theorie und Praxis vereint, nichts funktioniert und keiner weiß warum!"
    Meine gegebenen Tips & Antworten sind wie die Lottozahlen - immer ohne Gewähr ;)

    Mozilla/5.0 (Windows NT 10.0; WOW64; rv:38.0) Gecko/20100101 Firefox/38.5.1-ESR

  • Zitat von klaudschv

    auf manchen seiten ist mir jetzt aber aufgefallen, dass input felder und buttons aber so ausschauen:[...]

    "Auf manchen Seiten" hilft nicht weiter.
    Wenn du willst, dass ich mir das Problem anschaue und wenn möglich behebe, musst du schon sagen auf welchen.
    (Links angeben!)

  • Hallo,

    Eingabefelder rechts-oben und die Google-Suchleiste
    http://www.freenet.de/freenet/

    Eingabefelder links-oben
    http://office.freenet.de/dienste/emailoffice/index.html

    Diese werden teilweise unten abgeschnitten. Lässt sich das korrigieren?


    [Blockierte Grafik: http://wawuschel.erweiterungen.org/IMGhost/i/freenetInputField.png]

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Könnte das Highlighting um die Schaltflächen evtl. entfernt werden?

    http://www.google.com/webhp/
    http://de.search.yahoo.com/web?


    [Blockierte Grafik: http://wawuschel.erweiterungen.org/IMGhost/i/t/HiglightingUmSchaltflaechen.png]

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Der Inhalt meiner userContent.css
    http://pastebin.com/f2c57d5fd


    Vielen Dank.

    Gruß
    Wawuschel

  • Zitat von Wawuschel

    Diese werden teilweise unten abgeschnitten. Lässt sich das korrigieren?

    In dieser Version sollte das Problem behoben sein:

    Anmerkungen dazu:
    Das entscheidende ist -moz-box-sizing: content-box !important; , siehe https://developer.mozilla.org/en/CSS/-moz-box-sizing.
    Hinter position: relative und left: -4px darf kein !important; stehen, da diese Werte nur dann gefahrlos angepasst werden können, wenn die Seite diese nicht vorgibt, ansonsten droht eine völlig chaotische Darstellung. (Diese Angabe ist notwendig, um zu verhindern, dass die Input-Felder auf manchen Seiten hinten anbgeschnitten werden.)

    -----------------------------------------------

    Zitat

    Könnte das Highlighting um die Schaltflächen evtl. entfernt werden?

    Ja, einfach die Zeile

    Code
    input:not([type="checkbox"]):not([type="radio"]):focus,

    durch

    Code
    input:not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,

    ersetzen.
    In der "normalen" Version lasse ich das Highlighten von Buttons aber drin, da es beim springen mit der [Tab]-Taste zwischen diesen nützlich ist.
    Ich werde jedoch auch auf der userstyles-Seite einen Hinweis hinzufügen, dass dieses Verhalten geändert werden kann.

  • jetzt isses nicht mehr zu klein sondern geht in die andere richtung.

    [Blockierte Grafik: http://img15.imageshack.us/img15/6316/screnc.png]

    die eingabezeilen werden jetzt zu groß dargestellt (auch die buttons) und am rechten rand wird der schein abgeschnitten.

    wieder nur auf den schon geposteten seiten sind die probleme. bei google z.b. gibts keine veränderung.

    bei yahoo.de wird jetzt der button beim klick unten abgeschnitten:

    [Blockierte Grafik: http://img22.imageshack.us/img22/2702/scrent.th.png]

  • Zitat von klaudschv

    die eingabezeilen werden jetzt zu groß dargestellt (auch die buttons)

    Dieser leichte Zuwachs ist nicht vermeidbar. Die Erkärung dazu ist aber relativ lang, weshalb ich sie (wenn sie nicht jemand unbedingt braucht) hier weglasse. (Tipp: wird durch das oben angesprochenen -moz-box-sizing verursacht)

    Zitat

    am rechten rand wird der schein abgeschnitten. [...]
    bei yahoo.de wird jetzt der button beim klick unten abgeschnitten:

    Sollte hier behoben sein: