CSS Frage -> Farbige Form-Listen ?

[Griefshire]

Moin zusammen.

Ich hätt da mal eine Frage bezüglich CSS. Und zwar möcht ich ein Formular fertig machen, dazu hab ich ein Formularfeld mittels
<select> eingebaut, ich weiß wie ich dort einzelne Listenelemente Designen kann. Jetzt würd ich aber gerne Wissen, wie ich auch den äußeren Bereich ändern kann.

Hier mal ein Beispiel wie ich das mein.

[Guillermo]

Hi Griefshire,

dazu gibt es schon sehr viel Material. Eine sehr gute Erklärung findest du bspw. hier: http://ryanfait.com/resources/custom-ch ... o-buttons/

Viele Grüße,
Guillermo

[Griefshire]

Hi Griefshire,

dazu gibt es schon sehr viel Material. Eine sehr gute Erklärung findest du bspw. hier: http://ryanfait.com/resources/custom-ch ... o-buttons/

Viele Grüße,
Guillermo

Hab mir das jetzt ma angeschaut und ausprobiert, aber irgendwie will er das nicht richtig anzeigen. Die Datein hab ich auch eingebunden und die Bild-Adresse im design angepasst :I

[Guillermo]

Wie hast du es genau eingebunden, wie schaut deine Selectinput aus, wird es falsch oder einfach garnicht angezeigt... ? Ein paar Anhaltspunkte in Form von Bildern oder Quelltexten wären hilfreich

[Griefshire]

Wird sofort nachgeliefert

Also. Meine Ordner-Struktur sieht so aus :


Also, die Datei custom-form-elements.js befindet sich im Ordner javascript. Meine Design Datei style.css befindet sich im Ordner Design, dort habe ich den Code von der Seite eingefügt, die du mir da geschickt hast. In meiner index.php, die sich im Hauptordner befindet, habe ich die entsprechenden Codes eingefügt. Also <link href="css/styles.css" rel="stylesheet" type="text/css" /> und <script type="text/javascript" src="javascript/custom-form-elements.js"></script>, letzteres im body bereich.

Meine Checkbox sieht so aus :
<div id="reg_agb_form">
<input name="agb" type="checkbox" class="styled">
</div>

Aktuell wird keine Checkbox angezeigt sobald ich class="styled" einfüge.

Achja, hier noch der css Code :

Code: Alles auswählen

.checkbox, .radio {
   width: 19px;
   height: 25px;
   padding: 0 5px 0 0;
   background: url(../images/icons/checkbox.gif) no-repeat;
   display: block;
   clear: left;
   float: left;
}
.radio {
   background: url(../images/icons/radio.gif) no-repeat;
}
.select {
   position: absolute;
   width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
   height: 21px;
   padding: 0 24px 0 8px;
   color: #fff;
   font: 12px/21px arial,sans-serif;
   background: url(../images/icons/select.gif) no-repeat;
   overflow: hidden;
}