# CSS Auswahlbox Design



## Dustin84 (9. Dezember 2008)

Hallo,

ich habe ein Problem mit meiner Auswahlbox:


```
<div style="width:533px; height:33px; background-color:#ffffff;"/><!-- Start Auswahlbox -->
     <form>
	<select name="site" onChange=formHandler(this.form) size="1" class="auswahl">
	<option value="dautenwinden.html">Dautenwinden</option>
	<option value="carldiem.html">Carl-Diem-Halle</option>
        </select>
     </form>
</div>
```

CSS CODE:

```
.auswahl {
	width:300px; 
	float:right; 
	margin: 6px 25px 0px 0px; 
	background-color: #484545;
	color:#fff15f;
}
```

1.)
Wie kann ich die Borderfarbe ändern ?
Mit border-bottom-color:#00FF00; komme ich da nicht weiter 

2.)
Wie kann ich den Pfeilbutton und dessen Kontur ändern ?

3.)
<option value="dautenwinden.html">Dautenwinden</option>
Wie gestalte ich dieses Feld dynamisch ? So, dass ich nicht jede neue Galerie selber eintragen muss.
Das ganze wird später eine Auswahlbox für viele Bildergalerien.

Gruß
D.


----------



## kalterjava (9. Dezember 2008)

Hallo,

wenn ich mich recht erinnern kann, so ist speziell bei diesem Element nichts in Bezug auf gestalterischen Möglichkeiten zu machen. Man muss mit den Betriebssystem-Einstellungen leben - alles andere ist auch nicht WC3-konform.

Für dein Vorhaben könntest du so eine Leiste mit PHP programmieren. Da hast du dann alle Möglichkeiten. 

Lasse mich gerne eines besseren belehren.


----------



## Dustin84 (9. Dezember 2008)

das geht doch bestimmt auch mit CSS. Es heißt doch immer: "Schönere Formulare mit CSS" ;-)


----------



## Loomis (9. Dezember 2008)

Bitte sehr: http://de.selfhtml.org/html/formulare/anzeige/formatieren_css.htm

Den Pfeil kann man nicht ändern. Soweit ich weis.


----------



## Maik (9. Dezember 2008)

Dustin84 hat gesagt.:


> das geht doch bestimmt auch mit CSS.


Hi,

da muß ich dich leider enttäuschen -> Styling form controls & Styled select boxes

mfg Maik


----------



## Dustin84 (9. Dezember 2008)

bei mir klappt das nicht. ich kann die Farbe/Stärke der Kontur nicht ändern :-(


----------



## Maik (9. Dezember 2008)

Hast du meine beiden empfohlenen Links nicht gelesen und die Demos studiert? 

mfg Maik


----------



## Dustin84 (9. Dezember 2008)

doch habe ich aber diese ganzen Befehle funktionieren nicht .


```
#el01 {color:#00f;} 
#el02 {background-color:#ddd;} 
#el03 {color:#fff; background-color:#33b;} 
#el04 {border-width:4px;} 
#el05 {border-color:#00f;} 
#el06 {border:0;} 
#el07 {font-family:"Courier New", Courier;} 
#el08 {font-size:150%;} 
#el09 {font-size:10%;} 
#el10 {font-weight:bold;} 
#el11 {padding:0;} 
#el12 {margin:0; text-align:right;}
```


----------



## Maik (9. Dezember 2008)

Mal eine andere Frage: Bist du der englischen Sprache mächtig, um der Aussage des Autors folgen zu können?

Desweiteren: Hast du dir mal die Screenshots zu den einzelnen Formularelementen genauer angeschaut, und nicht gesehen, wie die vom Autor gesetzten CSS-Regeln von den einzelnen Browsern auf den unterschiedlichen Betriebssystemen interpretiert werden?

Es gibt einfach keine browserübergreifende Möglichkeit, gewisse Formularelemente auf den unterschiedlichen Betriebssystemen einheitlich mit CSS zu gestalten.

mfg Maik


----------



## Maik (9. Dezember 2008)

Zur Verdeutlichung: http://www.456bereastreet.com/i/select.png bietet eine "Browser-Übersicht" zu der von dir verwendeten CSS-Regel für das select-Element, und wie sie von den Browsern interpretiert werden.

mfg Maik


----------



## kalterjava (9. Dezember 2008)

cool! Dann hatte ich doch nicht ganz unrecht


----------

