Umrandung von Input Feldern wie Safari

    Hi Leute,

    ich wollte mir einen Stylish Code machen, der Input Felder wie in Safari umrahmt.

    Das Resultat schaut bei mir so aus:

    [Blockierte Grafik: http://img3.imagebanana.com/img/yb6ji5ji/thumb/scree.png]

    original isses aber so:

    http://www.perun.net/wp-content/upl…ari3-google.png

    meine umrandung hat scharfe kannten, die vom safari verschwimmt nach außen so.

    wie bekomme ich im css diesen blurr out hin?

    -webkit-focus-ring-color
    Webkit-spezifisch, gibt es im Fx nicht.

    Ausnahme vielleicht auf MAC
    https://developer.mozilla.org/en/CSS_Referen…illa_Extensions
    -moz-mac-focusring

    Mit -moz-cellhighlight bekommt man es noch OS-spezifisch hin.

    für Gecko 1.9.1 (Shiretoko / zukünftiger Firefox 3.1):

    CSS
    @namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http), url-prefix(https), url-prefix(file) {
  input:focus, 
  textarea:focus {
    -moz-box-shadow: 0px 0px 3px 3px rgba(85,165,243,0.5) !important;
  }
}


    Vorteile:
    -kommt nicht so leicht mit Seiten-Stilen in die Quere
    -funktioniert auch mit Radio-Buttons und Checkboxen

    Nachteil:
    Funktioniert erst mit Firefox 3.1, der noch nicht erschienen ist und Testversionen sind für den Alltagsgebrauch nicht zu empfehlen.

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

    Für Gecko 1.9 (Firefox 3.0.x):


    Vorteil:
    -funktioniert in Firefox 3.0.x

    Nachteile:
    -sieht auf manchen Seiten seltsam aus (speziell bei dunklem Seitenhintergrund)
    -funktioniert nicht mit Radio-Buttons und Checkboxen

    extrem geil! danke dir vielmals.

    wie ist der code zu interpretieren? werden hier mehrere ringe mit unterschiedlicher intensität (20%, 50%, 70% und 80%) übereinandergelegt? oder wie kann man das verstehen?

    Hab' mal die unnötigen Doppelungen entfernt. Ausserdem habe ich eine Lösung für das Problem mit den dunklen Hintergründen gefunden.*

    Für Gecko 1.9 (Firefox 3.0.x) [überarbeitet]:

    * --> https://developer.mozilla.org/En/CSS/-moz-background-clip

    Das finde ich ja jetzt mal extrem unverschämt.
    Es gibt scheinbar Nutzer (namentlich klaudschv) die offensichtlich denken, dass es in Ordnung wäre sich userstyles von anderen schreiben zu lassen, um sie dann als angeblich selbstgeschrieben weiterverbreiten zu können.

    Es ist ja nicht so, dass ich generell etwas dagegen habe, wenn man meine userstyles und userscripts weitergibt (alle die ich außerhalb von Foren veröffentliche erhalten deshalb die CC-by-License) aber die Nennung des Originalautors muss schon sein!

    (Bei Werken die ohne Lizenzinformationen veröffentlicht werden, gilt generell, dass man sie ersteinmal gar nicht weitergeben darf, somit kann er nicht sagen, er habe nicht gewusst, dass die Namensnennung gewünscht sei.)

    Bei denen die ich in Foren veröffentlicht habe, habe ich bisher darauf verzichtet, da ich davon ausgegangen bin, dass niemand so dreist ist, es weiterzugeben und sich selbst als Autor auszugeben. Aber scheinbar muss ich zukünftig wohl bei dem kleinsten Code Schnipsel diese Angabe hinzufügen um wenigstens etwas besser gegen solche User geschützt zu sein...

    Ich hoffe, dass ich mit meiner Bitte an ihn auf userstyles.org weiterkomme, sonst muss ich auch noch dem Seitenbetreiber schreiben.

    Post von mir auf userstyles.org:

    Zitat

    SD-DAken said on Feb 27 2009

    This user claims this is his code, but it is not.
    I have written this userstyle and published originally at firefox-browser.de (username: A.J.),
    then later on userstyles.org (username: sd-daken).
    @firefox-browser.de: http://www.firefox-browser.de/forum/viewtopic.php?t=69405#539058
    @userstyles.org: http://userstyles.org/styles/15401 & http://userstyles.org/styles/15402

    @iklaudsch: Either ATTRIBUTE ME for the writing of this code OR DELETE this userstyle, thanks!


    http://userstyles.org/styles/15378#review-9858
    http://userstyles.org/styles/15401
    http://userstyles.org/styles/15402

    Ich möchte ihn da etwas in Schutz nehmen:
    Er ging vielleicht davon aus, dass dies hier so Usus ist.
    Bei der Diskusssion um seine Erweiterung für Google Docs habe ich ihm bewusst gestattet die Code-Schnippsel zu verwenden. Insbesondere weil deren Schöpfungshöhe nicht wirklich erwähnenswert ist.
    Vielleicht nahm er daher an, dass dies auch auf andere Threads übertragbar ist.

    In dem Thread hat er auch angeboten mich zu referenzieren. Daher liegt ihm wohl weniger an der Verletzung deiner Rechte. Eher würde ich es als Unachtsamkeit einstufen.

    Ich habe für sowas immer einen ähnlichen Code benutzt. Hab ich irgendwoher, könnte hier sogar im Wiki stehen:

    <a href="data:application/x-javascript;base64,LyoqKioqIEJlYXV0aWZ1bCBGb3JtICoqKioqLw0KDQpALW1vei1kb2N1bWVudCB1cmwtcHJlZml4KGh0dHApIHsNCg0KLyogY2hhbmdlIHRoZSBidXR0b25zICovDQppbnB1dFt0eXBlPSJyZXNldCJdLCBpbnB1dFt0eXBlPSJzdWJtaXQiXSwgYnV0dG9uDQp7DQogIC1tb3otYm9yZGVyLXJhZGl1czogMC41ZW0gIWltcG9ydGFudDsNCiAgYm9yZGVyOiAxcHggc29saWQgI0NDQyAhaW1wb3J0YW50Ow0KICBib3JkZXItYm90dG9tOiAxcHggc29saWQgIzk5OSAhaW1wb3J0YW50Ow0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjRUVFICAhaW1wb3J0YW50Ow0KY29sb3I6ICMwMDAgIWltcG9ydGFudDsNCn0NCg0KaW5wdXQsIHRleHRhcmVhDQp7DQogLW1vei1ib3JkZXItcmFkaXVzOiAwLjhlbSAhaW1wb3J0YW50Ow0KfQ0KDQppbnB1dCwgdGV4dGFyZWEsc2VsZWN0DQp7DQogIGJhY2tncm91bmQtY29sb3I6ICNGRkYgIWltcG9ydGFudDsNCiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICM5ODk4OTggIWltcG9ydGFudDsNCiAgYm9yZGVyLXJpZ2h0OiAxcHggc29saWQgI0MzQzNDMyAhaW1wb3J0YW50Ow0KICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI0RERCAhaW1wb3J0YW50Ow0KICBib3JkZXItbGVmdDogMXB4IHNvbGlkICNDM0MzQzMgIWltcG9ydGFudDsNCmNvbG9yOiAjMDAwICFpbXBvcnRhbnQ7DQp9DQoNCi8qIGNoYW5nZSB0aGVtIG9uIGZvY3VzIHdpdGggYSBibHVlIGJvcmRlciAqLw0KaW5wdXQ6bm90KFt0eXBlPSJidXR0b24iXSk6bm90KFt0eXBlPSJyZXNldCJdKTpub3QoW3R5cGU9InN1Ym1pdCJdKTpub3QoW3R5cGU9ImNoZWNrYm94Il0pOmZvY3VzLHRleHRhcmVhOmZvY3VzDQp7DQotbW96LW91dGxpbmUtcmFkaXVzOiAwLjhlbSAhaW1wb3J0YW50Ow0KfQ0KDQppbnB1dDpub3QoW3R5cGU9ImJ1dHRvbiJdKTpub3QoW3R5cGU9InJlc2V0Il0pOm5vdChbdHlwZT0ic3VibWl0Il0pOm5vdChbdHlwZT0iY2hlY2tib3giXSk6Zm9jdXMsIHRleHRhcmVhOmZvY3VzLCBzZWxlY3Q6Zm9jdXMNCnsgICAgDQotbW96LW91dGxpbmU6IDJweCBzb2xpZCAjNzRDM0NFICFpbXBvcnRhbnQ7DQotbW96LW91dGxpbmUtb2Zmc2V0OiAtMXB4ICFpbXBvcnRhbnQ7DQp9DQoNCi8qIHJvbGxvdmVyIGVmZmVjdCBvbiB0aGUgYnV0dG9ucyAqLw0KaW5wdXRbdHlwZT0ic3VibWl0Il06aG92ZXIsaW5wdXRbdHlwZT0icmVzZXQiXTpob3ZlcixidXR0b246aG92ZXIgew0KDQogIGJvcmRlci1jb2xvcjogI0U4RTlFOCAhaW1wb3J0YW50Ow0KICBib3JkZXItYm90dG9tLWNvbG9yOiNCNkI0QjYgIWltcG9ydGFudDsNCiAgYmFja2dyb3VuZC1jb2xvcjogI0ZDRkNGQyAhaW1wb3J0YW50Ow0KfQ0KfQ%3D%3D">Beautiful-Form</a>

    Der rundet die Ecken auch noch ab.

    Wenn ich das mit Deinem Code vergleiche, fällt mir auf, dass es zu leichten Verschiebungen innerhalb der Webseite kommt, wenn ich in ein Textfeld klicke, siehe zB hier: http://software.hixie.ch/utilities/cgi/data/data

    Vielleicht könntest Du dagegen noch irgendwas einarbeiten? Dann würde ich wahrscheinlich zu Deinem Code wechseln.


    PS: Ist aber schon extrem ungewohnt, wenn ich meinen Code deaktiviere. Da dieser zB hier im Forum anscheinend auch noch diese pseudo-3D-Ränder deaktiviert, bevor man in ein Textfeld klickt. Wäre vielleicht auch noch einen Gedanken wert.

    Zitat von boardraider

    Ich möchte ihn da etwas in Schutz nehmen:
    Er ging vielleicht davon aus, dass dies hier so Usus ist.
    Bei der Diskusssion um seine Erweiterung für Google Docs habe ich ihm bewusst gestattet die Code-Schnippsel zu verwenden.

    Das wusste ich nicht. Dennoch ist es (für mich) ziemlich unverständlich, wie man die Erlaubnis für die Verwendung eines Code-Schnipsels einfach auf alle ausdehnen könnte...

    Zitat von A.J.

    Aber scheinbar muss ich zukünftig wohl bei dem kleinsten Code Schnipsel diese Angabe hinzufügen um wenigstens etwas besser gegen solche User geschützt zu sein...

    Um das nochmals besser zu formulieren. (Wenn man in Wut schreibt, sind die Formulierungen manchmal nicht so glücklich gewählt...)
    Natürlich ist die Namensnennung nur bei Code nötig, der eine gewisse Länge, Kreativität, oder Komplexität aufweist. Bei einzeiligen Ergänzungen, Beispielen, Korrekturen nicht. (Das einzeilig ist hier nicht wörtlich zu verstehen sondern eher "von geringer Länge"; was gering ist hängt von der jeweiligen Situation ab.)

    Am besten lässt man die schon von mir hinzugefügte Lizenzinformation stehen, oder wenn es keine gibt (ist es zumindest für mich) selbstverständlich den Autor anzuschreiben und zu fragen unter welcher Lizenz und unter welchen Bedingungen der Code zu nutzen ist.

    (Anmerkung: Bei Dingen wie Bookmarklets ist keine Lizenzinfo/Autorenkennung im Code möglich; in diesem Fall sollte diese Information einfach im "Begleittext" genannt werden)

    Zitat von Panther1

    Weiß jemand wie man das springen beim einfügen oder klicken in den Input Felder weg bekommt ?

    Zitat von Miccovin

    Wenn ich das mit Deinem Code vergleiche, fällt mir auf, dass es zu leichten Verschiebungen innerhalb der Webseite kommt, wenn ich in ein Textfeld klicke, siehe zB hier: http://software.hixie.ch/utilities/cgi/data/data

    Dieses Problem sollte hierin behoben sein:

    Zitat von Panther1

    Aber wo bleibt das Runde ?
    Das sah irgend wie besser aus :wink:

    Mein Userstyle hat doch nie abgerundete Kanten genutzt, wenn du aber welche willst, kannst du

    CSS
    -moz-border-radius: 0.8em !important;

    hinzufügen. (unterhalb von border-width)

    Zitat

    Das springen ist beim senden der Nachrichten immer noch zu erkennen :roll:

    Das ist ein Kompromiss. Entweder man nimmt dieses leichte springen beim anklicken von Buttons in kauf, oder man verzichtet auf das highlighten von fokusierten Buttons (das jedoch nützlich ist, wenn man mit der Tab-Taste zwischen Buttons wechselt...).

    A.J. wrote:

    Zitat

    wie man die Erlaubnis für die Verwendung eines Code-Schnipsels einfach auf alle ausdehnen könnte

    Ich denke so pauschal wird er das nicht sehen. Dass auch in CSS-Code eine gewisse Arbeit steckt und es nicht selbstverständlich ist, diesen für sich zu beanspruchen, sehe ich auch so.

    Zitat

    (ist es zumindest für mich) selbstverständlich den Autor anzuschreiben und zu fragen unter welcher Lizenz und unter welchen Bedingungen der Code zu nutzen ist.

    Unabhängig von der Code-Länge halte ich das für angebracht aus Sicht desjenigen, der den Code anderswo veröffentlichen will. So lassen sich dann auch Zweifel bzgl. der Schöpfungshöhe kurz klären.