PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Formular styles !!


Mr S_itt
30.04.2002, 10:53:39
Ich weiß jetzt nicht ob das in PHP gehört aber hoffe trotzdem auf eine Antwort, ich baue im moment einen Webshop für meinen Arbeitgeber, der schon fast fertig ist, doch möchte er gerne das die Formulare bzw. buttons nicht so 3D mäßig aussehen also die textfelder nicht wie einbuchhtungen aussehen und die buttons ebenfalls net, wie kann ich das realisieren ??

Nev
30.04.2002, 12:05:43
Hi Mr S_it

Das ganze kannst du nur mit CSS lösen:

Beispiel für Input, Select,TextArea

INPUT {
BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #666699 1px solid; BORDER-LEFT: #666699 1px solid; BORDER-RIGHT: #666699 1px solid; BORDER-TOP: #666699 1px solid; COLOR: #000000; FONT-FAMILY: arial; FONT-SIZE: 12px; FONT-WEIGHT: normal
}
INPUT.achtung {
BACKGROUND-COLOR: #666699; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; COLOR: #ffffff; FONT-FAMILY: arial; FONT-SIZE: 12px; FONT-WEIGHT: bold
}
SELECT {
BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #666699 1px solid; BORDER-LEFT: #666699 1px solid; BORDER-RIGHT: #666699 1px solid; BORDER-TOP: #666699 1px solid; COLOR: #000000; FONT-FAMILY: arial; FONT-SIZE: 12px; FONT-WEIGHT: normal
}
TEXTAREA {
BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #666699 1px solid; BORDER-LEFT: #666699 1px solid; BORDER-RIGHT: #666699 1px solid; BORDER-TOP: #666699 1px solid; COLOR: #000000; FONT-FAMILY: arial; FONT-SIZE: 12px; FONT-WEIGHT: normal
}


Wenn wir schon bei dem Thema sind,

ich suche für TextArea und Select-Box den CSS-Tag damit der Scroll Designed ist.

Damir
30.04.2002, 15:33:29
Hi,
fuer Textarea ist es:

<style type="text/css">
BODY {
SCROLLBAR-BASE-COLOR: #FFEEDD;
SCROLLBAR-ARROW-COLOR: #AA5522;
}
TEXTAREA {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
</style>

Bye Damir

P.S. Siehst Du aber auch hier im Quellcode

Matthias
30.04.2002, 16:30:17
wie passend.

Bei meinem select kann ich nur die Farben und die Schrift ändern. Nicht aber den Rahmen. Ich werd jetzt das von Nev ausprobieren. Mal schaun. Aber meins sieht ähnlich aus.

Für meine Textarea sieht der css so aus (nur noch zur Info):

.textfield
{
font-family:Arial; font-size:10pt; color:#000000; background-color:#FFFFFF; border-left:1px solid #000000; border-right:0px solid #000000; border-top:1px solid #000000; border-bottom:1px solid #000000; scrollbar-3dlight-color:#000000; scrollbar-arrow-color:#000000; scrollbar-base-color:#000000; scrollbar-darkshadow-color:#000000; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF;
}

Matthias
30.04.2002, 16:34:49
mist.
war aber auch klar.

weiß jemand warum man beim select keine Rahmen ändern kann??

Nev
30.04.2002, 17:49:08
@Matthias

wie ich sehe hast du den Scrollbar beim Text-Area verändert,

werde es bei mir dann auch probieren

->Select
Kann mir einer sagen wie man das Drop-Down-Feld definiert
Text und Farbe weiß ich, aber ich würde gerne den Pfeil in einer anderen Farbe haben.

|Coding
30.04.2002, 19:16:45
hi all,

ähm ich habe die formatierung für meine textarea so umgesetzt:


textarea
{
background: transparent ! important;
background-color: #222222 ! important;
border: 1px solid #004400 ! important;
color: #009900 ! important;
font-family: verdana ! important;
font-size: 10pt ! important;
text-align: center ! important;
scrollbar-face-color: #004400 ! important;
scrollbar-shadow-color: #222222 ! important;
scrollbar-highlight-color: #222222 ! important;
scrollbar-3dlight-color: #222222 ! important;
scrollbar-darkshadow-color: #222222 ! important;
scrollbar-track-color: #000000 ! important;
scrollbar-arrow-color: #99ff00 ! important;
}

und ich hab es so verstanden das Matthias die farbe des borders beim fokusieren ändern will... hoffendlich ist das korrekt?

dies habe ich so realisiert:

für eine <textarea>:
<input onFocus="this.style.border='1px solid #ff0000'" onBlur="this.style.border='1px solid #ffffff'">

für ein Eingabefeld:
das selbe in grün *g*

für einen botton:
naja ihr kennt das ja *fg*


naja ist eigendlich nichts anderes als eine kombination von CSS und JavaScript.
wenns fragen gibt einfach posten.
ich hoffe nun auch mal etwas helfen zu können?

Matthias
30.04.2002, 21:12:04
@|Coding: da mußt du was falsch verstanden haben. ich hab das selbe Problem wie Nev. Kann beim select keinen Rahmen und den Pfeil nicht ändern.

Nev
30.04.2002, 21:27:34
@|Coding

Ich habe gerade einen Sytle ausprobiert, doch irgendwie ist der der Scrollbar des TextArea nicht designed.

Würde gerne auch diesen Designen.

wie Matthias schon geschrieben hat, suchen wir beide die Möglichkeit, die Select-Box zu desigenen.

|Coding
01.05.2002, 22:02:01
hi all,

sorry @ all da habe ich etwas falsch verstanden.

<select> boxen kann man nicht "äußerlich" designen nur der content der box, also die schriftart, schriftfarbe, bgcolor...
leider kann man border, pfeil usw. nicht verändern.
ich versuche möglichst immer diese drop-down-felder zuvermeiden.
sollte dies mal nicht möglich sein so nehme ich statt des drop-down-feldes einfach radiobuttons bei einfach auswahl oder checkboxen bei mehrfachauswahl.
das ist allerdings nicht ganz die feine englische art, man muss auf die gestaltung des formulars achten (wegen der übersichtlichkein) und es macht mehr arbeit aber naja zumindest wird das design nicht durch die blöden standart colors gestört.
ich hoffe ihr versteht was gemeint ist?


@nev

schreib das ganze mal in eine class z.b.:

.textarea
{
background: transparent ! important;
background-color: #222222 ! important;
border: 1px solid #004400 ! important;
color: #009900 ! important;
font-family: verdana ! important;
font-size: 10pt ! important;
text-align: center ! important;
scrollbar-face-color: #004400 ! important;
scrollbar-shadow-color: #222222 ! important;
scrollbar-highlight-color: #222222 ! important;
scrollbar-3dlight-color: #222222 ! important;
scrollbar-darkshadow-color: #222222 ! important;
scrollbar-track-color: #000000 ! important;
scrollbar-arrow-color: #99ff00 ! important;
}


und impementier diese in die textbox (class="textarea").
dann funzt es sicher.
der beweis *g* meine homepage (http://www.danielkressler.de)

Nev
01.05.2002, 22:48:14
@|Coding

Ich habe mir deine Page angeschaut ung habe im Gästebuch ein Textarea gefunden.zum-TextArea (http://www.privat.danielkressler.de/submit.php)
nur dort hast du genau das selbe Problem wie ich.

Es geht um den Scroll-bar im Area, den würde ich gerne in einer anderen Farbe haben

Matthias
01.05.2002, 23:24:11
Was benutzt du für nen Browser??

|Coding
01.05.2002, 23:30:29
@nev

naja dann mach mal ein browser update, denn netscape navigator 4.x und andere ältere browser auch der internet explorer können das nicht interpertieren. sollte es nicht an einem zualten browser liegen dann, naja bin ich auch was überfragt, weil was bei mir klappt das muss bei dir auch klappen... der nn ist in sachen css sowieso etwas "eigenwillig" bzw. hat mit der darstellung einiger formatierungen probleme oder kann es erst garnicht wie z.b. farbige browser-rollbalken.

Nev
01.05.2002, 23:54:37
Hi @ll

Hab derzeit den IE 5.0 oben!!

Werde wohl ein Update machen!!

BIG THX

|Coding
02.05.2002, 00:11:46
Original geschrieben von Nev
@|Coding

Ich habe mir deine Page angeschaut ung habe im Gästebuch ein Textarea gefunden.zum-TextArea (http://www.privat.danielkressler.de/submit.php)
nur dort hast du genau das selbe Problem wie ich.

Es geht um den Scroll-bar im Area, den würde ich gerne in einer anderen Farbe haben

öhm wo du schon in meinem gb warst, hättes du dich auch eintragen können *g* man sieht doch das es "hunger" hat *fg*... nur so als anmerkung :)

Nev
02.05.2002, 00:22:14
@|Coding

hab ich nachgeholt!!

Hab jetzt den IE 6.0 oben
und siehe da Die Scrollbars sind frabig

Danke für den Style

Mr S_itt
02.05.2002, 12:18:51
Danke, für die Antwort hab mir schon gedacht das das mit CSS zu lösen ist doch leider hab ichs nicht in SELFHTML gefunden !!

nookone
02.05.2002, 18:34:15
sehr praktische hilfe in sachen css: http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarcolor.htm

oder.. auch auf der offiziellen seite der validator.. ganz praktisch..
http://jigsaw.w3.org/css-validator/validator-uri.html

|Coding
02.05.2002, 18:41:03
@Mr S_itt,

was willst du denn genau formatiert haben? nur die buttons und eingabefelder, oder noch mehr?