Umrandung von Input Feldern wie Safari

klaudschv

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?

CSS

@namespace url(http://www.w3.org/1999/xhtml);


@-moz-document url-prefix(http), url-prefix(file) {


input:focus, textarea:focus {
  -moz-outline: 0.2em solid -moz-rgba(85,165,243,0.75) !important;
  -moz-outline-offset: -0.1em !important;
    -moz-outline-radius: 4px !important;
}


input[type="submit"]:focus, input[type="image"]:focus, input[type="radio"]:focus, input[type="checkbox"] {


  -moz-outline: transparent !important;


}






button:focus::-moz-focus-inner {


  border-color: transparent !important;


}






button::-moz-focus-inner,


input[type="reset"]::-moz-focus-inner,


input[type="button"]::-moz-focus-inner,


input[type="submit"]::-moz-focus-inner,


input[type="file"] > input[type="button"]::-moz-focus-inner {


  border: 1px dotted transparent !important;


}






input[type="radio"]:focus {


  -moz-outline-radius: 12px;


  -moz-outline-offset: 0px !important;


}










}

Alles anzeigen

boardraider

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

A.J.

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):

CSS

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http), url-prefix(https), url-prefix(file) {
  input,
  textarea {
    margin: 2px !important;
  }
  input:focus, 
  textarea:focus {
    -moz-appearance: none !important;
    border-width: 4px !important;
    margin: 0px !important;
    -moz-border-radius: 3px !important;
    -moz-border-bottom-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) -moz-rgba(85,165,243,0.8) -moz-rgba(85,165,243,0.8) !important;
    -moz-border-left-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) -moz-rgba(85,165,243,0.8) -moz-rgba(85,165,243,0.8) !important;
    -moz-border-right-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) -moz-rgba(85,165,243,0.8) -moz-rgba(85,165,243,0.8) !important;
    -moz-border-top-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) -moz-rgba(85,165,243,0.8) -moz-rgba(85,165,243,0.8) !important;
  }
  input[type="radio"]:focus {
    margin: 2px !important;
    -moz-appearance: radio !important;
  }
  input[type="checkbox"]:focus {
    margin: 2px !important;
    -moz-appearance: checkbox !important;
  }
}

Alles anzeigen

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

boardraider

Ich nehme alles zurück und behaupte das Gegenteil
Die Spezifizierung mehrer Farbwerte kannte ich noch nicht. Klasse Tip!

klaudschv

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?

A.J.

Siehe hier:
https://developer.mozilla.org/en/CSS/-moz-border-bottom-colors

(nebenbei bemerkt: -moz-rgba(85,165,243,0.8) müsste nicht 3x dastehen, einmal würde auch reichen. Ich habe es nur deshalb 3 mal dastehen, da ich mit verschiedenen Transparenzwerten und Rahmenstärken experimentiert habe und es am Ende nicht 2 davon (obwohl sie überflüssig sind) gelöscht)

A.J.

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]:

CSS

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http), url-prefix(https), url-prefix(file) {
  input,
  textarea {
    margin: 2px !important;
  }
  input:focus, 
  textarea:focus {
    -moz-appearance: none !important;
    border-width: 4px !important;
    margin: 0px !important;
    -moz-background-clip: padding !important;
    -moz-border-radius: 3px !important;
    -moz-border-bottom-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) !important;
    -moz-border-left-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) !important;
    -moz-border-right-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) !important;
    -moz-border-top-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) !important;
  }
  input[type="radio"]:focus {
    margin: 2px !important;
    -moz-appearance: radio !important;
  }
  input[type="checkbox"]:focus {
    margin: 2px !important;
    -moz-appearance: checkbox !important;
  }
}

Alles anzeigen

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

A.J.

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

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

Miccovin

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.

Panther1

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

Sieht nicht gerade berauschend aus, und es nervt ein wenig :roll:

Miccovin

Genau das meinte ich ja

Vielleicht gibt's noch nen Update. Alternativ kannst Du mal das "Beautiful Form"-Script testen.

Panther1

Ist auch nicht schlecht wenn die schwarzen Kanten weg wären :wink:
Das springen ist weg !

Miccovin

auf einmal? aha

Panther1

Das springen ist weg, aber schau Dir mal wie zum Beispiel bei Google die Kanten an

[Blockierte Grafik: http://img3.imagebanana.com/img/87htaioa/thumb/UnbenanntLarge.JPG]

A.J.

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:

CSS

@namespace url(http://www.w3.org/1999/xhtml);


/* This file is licensed under Creative Commons Attribution License
 * http://creativecommons.org/licenses/by/3.0/
 *
 * Initial Developer:
 * Andreas Jung (sd-daken.deviantart.com)
 *
 * Contributor(s):
 *
 */


@-moz-document url-prefix(http), url-prefix(https), url-prefix(file) {
  input:not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
  textarea {
    -moz-appearance: none !important;
    border-width: 4px !important;
    -moz-background-clip: padding !important;
    -moz-border-bottom-colors: transparent transparent transparent rgb(120,120,200);
    -moz-border-left-colors: transparent transparent transparent rgb(120,120,200);
    -moz-border-right-colors: transparent transparent transparent rgb(120,120,200);
    -moz-border-top-colors: transparent transparent transparent rgb(120,120,200);
  }
  input:focus, 
  textarea:focus {
    -moz-appearance: none !important;
    border-width: 4px !important;
    -moz-background-clip: padding !important;
    -moz-border-bottom-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) !important;
    -moz-border-left-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) !important;
    -moz-border-right-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) !important;
    -moz-border-top-colors: -moz-rgba(85,165,243,0.2) -moz-rgba(85,165,243,0.5) -moz-rgba(85,165,243,0.7) -moz-rgba(85,165,243,0.8) !important;
  }
  input[type="radio"]:focus {
    -moz-appearance: radio !important;
  }
  input[type="checkbox"]:focus {
    -moz-appearance: checkbox !important;
  }
}

Alles anzeigen

Panther1

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

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

A.J.

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...).

Panther1

Zitat von A.J.
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)

[Blockierte Grafik: http://www.abnehmen.com/images/smilies/danke.gif]
Hat super geklappt und die Kanten wie bei Miccovin sind auch verschwunden

Einfach Geil :wink:

boardraider

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.