✔ Formular mit CSS gestalten

Status
Nicht offen für weitere Antworten.
Rexo

Rexo

Mitglied
Hallo,

ich steh vor einem Problem beim Coden eines Kontaktformulars.
Die Idee ist aus den langweiligen Standardschaltflächen eine etwas ansprechendere Variante zu erzielen.

Es stellt kein Problem dar, die einzelnen inputs, textareas und co. optisch zu gestalten und zu positionieren (z.b feiner Rand statt dem klobigen, oder was auch immer).

Nun aber zum eigentlichen Problem:
Ich möchte, dass sich die Hintergrundgrafik ändert, wenn ein User das Feld "aktiviert".
Ist dies nur mit CSS möglich?

Eine Lösung der Art (onmouseover="...", onkeypress="...", onfocus="..." und co.) scheiden aus, da diese auf Javascript beruhen. Ich möchte die Seite aber ohne! JS funktional und optisch "sauber" halten.

3 Zustände:
1) Hintergrundbild des Inputs vorhanden
2) User "aktiviert" das Feld (durch "keypress", a:active oder was auch immer) -> Hintergrundbild verschwindet bzw. wird weiss (gesamte Fläche)
3) Wenn der User etwas eingegeben hat bleibt die Hintergrundgrafik auf weiss
-> wenn er nichts eingegeben hat (und das Feld wieder verlässt)ändert sich die Grafik wieder auf den im Pkt. 1) genannten Hintergrund

Alternativ kann Pkt 3) auch auf dem weissen Hintergrund von Pkt 2 bleiben (was die Sache wohl deutlich vereinfacht bzw. überhaupt mit CSS realisierbar macht ;) )

Hat jemand ne Idee oder ein Link mit einem Lösungsvorschlag?

Grüsse
 
Meines Wissens ist das nicht mit CSS alleine möglich.
Da es sich aber um ein rein optisches Feature handelt, welches bei Abwesenheit die Verwendung der Seite nicht einschränkt, halte ich JavaScript für ein "zulässiges" Mittel.

Gruß hpvw
 
hab leider schon mit dieser Antwort gerechnet :rolleyes:

Rein "theoretisch" müsste es machbar sein, wenn das Input-Feld Hover-Eigenschaften (und damit auch a.active) annehmen würde.
Hab auch schon versucht, den Input in ein div zu packen und dieses zu ändern, doch leider kann man ein div nur bei einem Link verändern
-> "toten" Link eingefügt <a href="#"></a> und gehofft auf diesem Weg zu den Hover-Eigenschaften zu gelangen, doch leider hat es auch nicht funktioniert.

... aber therotisch :)
 
Probiers mal so:
HTML: 
<input type="text" class="blubb">

Code: 
.xyz:active{
background-color=#0060FF;
}
Edit:Klappt aber auf jeden Fall nicht im IE, der kennt :active nur bei a.
 
Ich muss das mal teilweise zurücknehmen.
Mit focus kann man zumindest das gerade editierte Feld hervorheben. Im IE funktioniert das natürlich nicht.

Hier ein Beispiel:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
    <title>Eingabefelder mit wechselndem Hintergund</title>
<style type="text/css" media="screen">
.bgChanging {
    color:#000;
    background:#fff;
    border:1px #363 solid;
}
.bgChanging:focus {
    color:#000;
    background:#cfc;
}
</style>
</head>
<body>
<h1>Eintrag</h1>
<div>
    <form action="./send.php" method="post">
        <p>
            <input
                type="text"
                name="title"
                class="bgChanging" />
        </p>
        <p>
            <textarea
                name="message"
                class="bgChanging"
                cols="40"
                rows="10"></textarea>
        </p>
        <p>
            <input
                name="send"
                type="submit"
                value="Senden" />
        </p>
    </form>
</div>
</body>
</html>
Mit Attributselektoren zum value-Attribut hätte ich gedacht, lässt sich noch mehr machen, aber das wollte nicht so richtig.

Gruß hpvw
 
Ihr bringt den Stein wieder ins Rollen ;)

War eben auf der Suche nach einem Hack für den IE mit seinem Problem die Hovereigenschaften nur dem a - Tag zu "gönnen". Und ich wurde fündig :)

http://www.xs4all.nl/~peterned/csshover.html

Damit scheint es möglich allen! Elementen seine Hover-Eigenschaften zu geben (was ja in FF schon länger ging).

Aber dennoch funktioniert das Element :focus nicht. Oder mach ich irgendwas falsch?

Laut deren "Anleitung":
#inputfeld:focus {
background-color: green; }

und die Einbindung von Version 2.01.050927 (1.41 and :focus) einbinden.

body {
behavior: url(csshover2.htc);
}

mit hover klappt es, aber nicht mif focus.. vllt. ist es auch noch ein "Bug" der aktuellen Version.

Aber hab mich doch eben sehr über das hilfreiche *.htc gefreut :)

Oder funktioniert es bei jemand?

@hpvw:

Hab in deinem Code das *.htc mal eingebunden, Doch :focus funktioniert lieder nicht, aber das mouseover schon... komisch :confused:
 
Rexo hat gesagt.:
Ich möchte die Seite aber ohne! JS funktional und optisch "sauber" halten.
Zum Vergrößern anklicken....
Der von dir genannte Behavior-Hack mit der csshover2.htc beruht aber auf Javascript.

csshover2.htc hat gesagt.:
Code: 
<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V2.01.050927 - hover, active & focus
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea):unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'},
	onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active|unknown).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) return [doc.getElementById(identify[1])];
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	return nodes;
	}
</script>
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet von einem Moderator:
Hi,

ist das Skript wirklich in Javascript geschrieben?

Es taucht der Tag "language="JavaScript" type="text/JavaScript"" nicht auf, und wenn ich im Browser Javascript manuell deaktiviere funktioniert das Skript weiterhin.

Grüsse,
Rexo
 
In dem <script> -Element fehlen zwar die Attribute language='JavaScript' und type='text/javascript', aber die Syntax erinnert doch sehr an Javascript ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück