mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 23:27 Benutzername: Passwort: Auto-Login

Thema: DropDown felder formatieren vom 10.05.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> DropDown felder formatieren
Seite: 1, 2  Weiter
Autor Nachricht
powdaer
Threadersteller

Dabei seit: 20.11.2002
Ort: Regensburg
Alter: 32
Geschlecht: Weiblich
Verfasst Mi 10.05.2006 14:53
Titel

DropDown felder formatieren

Antworten mit Zitat Zum Seitenanfang

Ich brauche eure Hilfe:
Kann man bei DropDown Feldern per CSS den Rahmen und den "Kasten mit dem Pfeil" ändern?

Hab schon überall gesucht, aber noch nichts gefunden.

Danke schonmal
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 10.05.2006 15:28
Titel

Antworten mit Zitat Zum Seitenanfang

rahmen ist browserabhängig, den pfeil kann man nicht ändern, da OS generiert.

alternativ gehts nur mit css / js ein dropdown zu simulieren.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
njow

Dabei seit: 23.04.2006
Ort: Löhne
Alter: 31
Geschlecht: Männlich
Verfasst Mi 10.05.2006 15:31
Titel

Antworten mit Zitat Zum Seitenanfang

hallo,

du hast die möglichkeit jedes feld einzeln zu formatieren.

css file / oder inline
Code:

select {
 background-color: #666666;
 font: 12pt Verdana, Arial, sans-serif;
}
 
.format1 {
 background-color: #e3e3e3;
}

.format2 {
 color: #a5a5a5;
}


select
Code:

<select>
   <option class="format1">option #1</option>
   <option class="format2">option #2</option>
   <option class="format1">option #3</option>
</select>


um dir die genauen parameter ( eigenschaften für css ) anzuschauen, würd ich einfach mal googeln.

mfg barry
  View user's profile Private Nachricht senden
powdaer
Threadersteller

Dabei seit: 20.11.2002
Ort: Regensburg
Alter: 32
Geschlecht: Weiblich
Verfasst Mi 10.05.2006 15:35
Titel

Antworten mit Zitat Zum Seitenanfang

hm, muss ich wohl weitersuchen,
danke für eure Hilfe!
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 10.05.2006 15:53
Titel

Antworten mit Zitat Zum Seitenanfang

powdaer hat geschrieben:
hm, muss ich wohl weitersuchen,
danke für eure Hilfe!


da hilft auch kein suchen. __geht nicht__
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Mi 10.05.2006 20:48
Titel

Antworten mit Zitat Zum Seitenanfang

tut schon gehen. mit ner menge javascript. von daher sollte man sich dreimal überlegen ob man da nich doch lieber die finger von lassen sollte.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 10.05.2006 21:46
Titel

Antworten mit Zitat Zum Seitenanfang

sag ich ja. ohne "dhtml" voodo dropdown scheisse (was aus accessibilty / usability und aufwands sicht ein no-go ist) ist da nix zu machen.
  View user's profile Private Nachricht senden
sidisinsane

Dabei seit: 30.01.2006
Ort: Hamburg
Alter: 45
Geschlecht: Männlich
Verfasst Do 11.05.2006 08:16
Titel

Antworten mit Zitat Zum Seitenanfang

Hatte das Beispiel vor geraumer Zeit schonmal gepostet. Vielleicht hilft es auch Dir. Den Pfeil wirst so komplett los, den Rahmen kannst Du formatieren wie Du magst und die einzelnen Felder lassen sich browserabhängig stylen.
Ursprünglich hatte ich diese Methode entwickelt, um die Breite einer Selectbox unabhängig von der Länge der Auswahltexte unter Kontrolle zu behalten, ohne Javascript und dergleichen.

CSS
Code:
div#select {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 20;
   width: 200px; /*Breite dem Layout anpassen*/
   height: 22px;
   margin-left: -100px;
   margin-top: -11px;
   overflow: hidden;
   color: inherit;
   background-color: transparent;
   border: 1px solid #FFCC00;
   }
select {
   position: relative;
   top: -1px;
   left: -1px;
   z-index: 10;
   width: 400px; /*Breite dem Text anpassen*/
   height: 25px;
   color: #333333;
   background-color: transparent;
   border: 1px solid #FFCC00; /*für Opera*/
   font-family: arial, sans-serif;
   font-size: 13px;
   }
option {
   border-left: 1px solid #FFCC00;
   border-right: 1px solid #FFCC00;
   }
.feld1 {
   color: #FFCC00;
   background-color: #FFFFFF;
   text-transform: uppercase;
   }
.feld2 {
   color: #FFFFFF;
   background-color: #FFCC00;
   }
.feld3 {
   color: #FFCC00;
   background-color: #FFFFFF;
   letter-spacing: 0.5em;
   }
.feld4 {
   color: #333333;
   background-color: #FFFFFF;
   text-transform: uppercase;
   font-weight: bold;
   }
.unten {
   border-bottom: 1px solid #FFCC00;
   }


HTML
Code:
<div id="select">
   <select name="custom-selectbox" size="1">   
   <option value="0" selected>:::::::::: Bitte w&auml;hlen Sie :::::::::: </option>   
   <option value="auswahl1" class="feld1">geht so</option>   
   <option value="auswahl2" class="feld2">suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper idee</option>
   <option value="auswahl3" class="feld3">alter hut</option>   
   <option value="auswahl4" class="feld4 unten">was soll das?</option>
   </select>
</div>


Zuletzt bearbeitet von sidisinsane am Do 11.05.2006 10:00, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Nach Dropdown auswahl neues Dropdown erscheinen
Vista + IE 7: Input Felder
chkFormular mehrere Felder
Felder ein-/ausblenden auf Mausklick
[mysql] einzelne Felder exportieren. wie?
adobe designer - erforderliche felder
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.