Inputs designen

**raian** · 18.03.2005 15:29

Hi!

Ich habe gegoogelt, ja. Ich habe die Boardsuche genutzt, ja. Ich habe nichts gefunden, ja!

Also, ich habe auf einer Seite, die ich auch als beispiel angeben würde wenn sie momentan net kaputt wäre(ist noch im Aufbau), gesheen, das er einen Andersfarbigen rand, und hintergrund gemacht hat.

Meine Frage ist WIE? Ich würde mir ja den quellcode ansehen, aber wie gesagt, die Seite is down...

Ich hoffe ihr könnt mir eine Art sagen, mit der man diese Problem der eintönigkeit ändern kenn^^

**dead_orc** · 18.03.2005 15:45

Ähm, bitte: Rand und Hintergrund von was?
Um der ganzen Seite einen anderen Hintergrund zu geben kannst du CSS benutzen:

Code:

<style type="text/css">
<!--
body {
 background-color: #012345;
 border: 1px #987654 solid;
}
-->
</style>

**raian** · 18.03.2005 15:47

ups...von inputs^^

also so is mein code:

<form>
<input...>
</form>

und den input will ich anders designen...

PS: komm gleich wieder...muss holz für den ofen abladen (praktische dinger^^)

**dadie** · 18.03.2005 15:48

Das ist die Power von CSS ^^

HTML-Code:

<style type="text/css">
<!--
.input7{
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-bottom: 1px ;
background-color: transparent;
font-family: courier;
font-size:11px;
}
-->
</style>

<input type="text" class="input7" />

vom Prinzip kann man diesen Grund Code erweitern wie man will ande Hintergrundfarbe einen Rand sätzen ihn umfärben (border-bottom: 1px black

oder den Rand Optisch verändern z.B. mit gestrichelten Linien das siht dan ginial aus für ein Formular ^^

(border-bottom: 1px dashed black

Edit: Mehr infos dazu unter meiner Lieblings CSS seite

http://css.fractatulum.net/sample/formformat.htm

Edit2:

Nicht vergessen den Input den du so verändern willst mit der class auszustaten in meinem Beispiel <input class="input7" > thx masterquest ^^

**Lukas** · 18.03.2005 15:51

Öhm, dadie, wenn die erste Zeile da so steht, müsste man doch <input class="input7"> schreiben, oder? Der . definiert das doch als CSS-Klasse. Wenn man alle input-Felder umdesignen will, muss man (afaik) in der ersten Zeile input{ schreiben.

**dead_orc** · 18.03.2005 15:55

Das ist allerdings nicht zu empfehlen, weil dadurch auch Checkboxes und Radiobuttons betroffen sind. Besser wäre input[type=text], input[type=password], textarea was aber natürlich vom IE nicht unterstützt wird

**raian** · 18.03.2005 15:57

hmm, okay, bis hier alles kalr, aber ich raff das mit dem .input7 usw net...
wenn mir jemand das noch erklärt, dfann bin ich froh...^^

**Tomarus** · 18.03.2005 16:04

Im Grunde ganz einfach. In der CSS-Definition das:

HTML-Code:

#mitrand
{
   background-color: #000000;
   border: 2px outset #CCCCCC;
   color: #FFFFFF;
}

Und bei den Inputs, für die dieses Design gelten soll, dann eben:

HTML-Code:

<input id="mitrand" type="text" />

**raian** · 18.03.2005 16:06

ähm, ich hab noch nie mit css gearbeitet...also wo muss die css definition hin usw?

Nunja...aber ansonsten is des jetz schon klar...

id gibt an das dann das design von #mitrand (falls so die id heißt) ausgegeben wird...einzige frage: wie erstelle ich diese 'id'?

edit:isses das:

<div id="IDname">
<p>Lorem ipsum dolor sit amet</p>
<p class="CLASSname">Lorem ipsum dolor sit amet</p>
</div>
???

**Tomarus** · 18.03.2005 16:11

Zitat von raian

id gibt an das dann das design von #mitrand (falls so die id heißt) ausgegeben wird...einzige frage: wie erstelle ich diese 'id'?

Hä? Indem du sie in die CSS-Definition schreibst. Die kommt am besten dahin, wo auch all deine anderen hinkommen. Auf ceneta.de.vu stehen die im Head-Bereich, schreib sie also einfach dazu bzw. eröffne diese Head/CSS-Bereich, wenn du ihn noch nicht hast.

HTML-Code:

<head>
<style type="text/css">
<!-- CSS-Definitionen -->
</style>
</head>

[edit] Öh, ja. Was ist denn jetzt noch die Frage? Hatte ich doch eigentlich schon in dem Beispiel oben gepostet ...

Thema: Inputs designen

Themen-Optionen

Anzeige

Hybrid-Darstellung

Inputs designen

Berechtigungen