Wie erstelle ich eine Ideviduelle Select Box

[ste3et_C0st]

Hallo und zwar habe ich ein problem ich schreibe gerade an meinem Wordpress theme und da möchte ich ihn die functions.php ein paar Sachen grafisch ferschönern.

Jetzt gibt es ja select boxen die normal so aussehen

Ich möchte sie allerdings ihn das hier ändern





Hier ist der HTML code

<div class="selectbox">
<a class="selectboxfield">Select an option</a>
<a class="open"><span></span></a>
<ul class="items">
<li class="item">
<a href="#">item1</a>
</li>
<li class="item">
<a href="#">item2</a>
</li>
<li class="item">
<a href="#">item3</a>
</li>
<li class="item">
<a href="#">item4</a>
</li>
</ul>
</div>

Hier mal mein PHP code

<?php
break;
 
case 'select':
?>


<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<div class="selectbox">
<a class="selectboxfield"><?php echo $option; ?></a>
<a class="open"><span></span></a>
<ul class="items">
<li class="item">
<select class="item" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?>
<option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } global $option ?>>
<?php echo $option; ?>
</option><?php } ?>
</li>
</ul>
</div>        


<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px solid #ccc;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>

Keine ahnung was ich falsch mache ihn der HTML form geht es will ich es allerdings ihn PHP ändern geht es nicht mehr

 

[threadi]

Wenn Du etwas gestalten willst, dann musst Du das mit CSS machen. PHP und HTML können dir hierbei nicht weiterhelfen.

Knackpunkt ist jedoch, dass das select-Element nicht wirklich stylebar ist. In modernen Browsern wie Firefox, Chrome etc. kann man zumindest Hintergrundfarben und Schriften einigermaßen bearbeiten. Beim IE (einschließlich Version 9) stößt man hier jedoch an die Grenzen des Möglichen.

Tipp: mach dich mal auf die Suche nach einem JavaScript, welches ein <select>-Feld so umbauen kann, dass es so grafisch aussieht wie Du möchtest.

 

[zorndyuke]

Bau dir ein jQuery Script welches die normalen Felder ausblendet, dafür Textfelder hinzufügt mit Style + einem Pfeil-nach-unten Bild. Den Cursor lässt du beim Hovern wie die Auswahlhand stylen und noch ein OnClickEventHandler welcher beim Klicken auf das Pfeil ( oder sogar Textbox ), eine Div-Box herausfadet mit den jeweiligen Optionen.

- Textbox mit style
- Rechts/Links daneben ein Pfeil-Nach-Unten Bild welches das Dropdown simuliert
- OnClickEventHandler
-> Div-Element fadet runter/hoch/zur Seite


Mit jQuery kann man so schön rumspielen^^

Google -> MyNextPlace , da haben wir eine ähnliche Technik benutzt. Auch mit Radiobuttons