#1 29. Oktober 2007 Zuletzt von einem Moderator bearbeitet: 14. April 2017 Also habe folgendes Problem, ich habe eine HP erstellt die eigentlich so ein wenig nen MacSytle hat. Nicht weils um Mac geht sondern weils einfach nurschlicht-chic aussieht. Nun habe ich meine Inputs schon einigermaßen gut designed und wollte nun auch die select boxen so ungefähr in Form bringen. Leider stieß ich dort schnell an die Grenzen von html und CSS, und davon nicht genug,... nichtmal die CSS Options funzen richtig. Hier mal nen Screen: Ich würde gern a.) das die Borders KOMPLETT weg sind, nicht der 1px rand der da noch zu sehen ist. b.) die Buttons anders aussehen ( was ja anscheinend mit css / html nicht machbar ist ) c.) die Hintergrundfarbe des Drop Downs ( das grau ) auf Transparent stellen. der quellcode sieht so aus: Code: select { background: transparent; font-size:12px; border:0px; height: 20px; padding:2px; background-color:transparent; } Ich bin auch für andere Lösungen ( DHTML , JS was auch immer ) offen, solange ich relativ schnell reinfinde um sie selbst zu designen und anzupassen. THX im voraus. S + Multi-Zitat Zitieren
#2 29. Oktober 2007 AW: Select Boxen designen Ist zwar meienr Meinung nach besser in webtechnick aufeghoben aber heir mal nen link zu nem script von dhtmlgoodies welches ne einfachen text input zu ner dropdown box macht.. DEMO: Editable select Script: Editable Select Box + Multi-Zitat Zitieren
#3 29. Oktober 2007 AW: Select Boxen designen An deiner Stelle würde ich darauf lieber verzichten. Erfahrungsgemäß gibt es immer mindestens einen Browser, in dem das ganze nicht so ausschaut, wie es sollte. Unter Umständen sieht es mit dem JS-Gepfusche am Ende noch schlechter aus als ohne oder der User wird haufenweise mit Fehlermeldungen überschüttet. Eine schlichte und einfache Seite bekommt man mit CSS am Besten hin. Solange man sich auf die gängigsten CSS-Eigenschaften beschränkt, kommt man mit allen Browsern gut aus und hat im Griff, wie die Page am Ende aussieht. Außerdem läuft man nicht Gefahr, dass die Page bei manchen Usern nicht so funktioniert, wie sie sollte. + Multi-Zitat Zitieren
#4 30. Oktober 2007 AW: Select Boxen designen Ich weis , aber was heißt gängigste Eigenschaften IE unterstützt nichtmal das focus event. Jedoch habe ich für alle solche Varianten schon ein sehr gutes und schlichtes Workaround geschaffen, warum also nicht auch dafür? Und selbst die gängigsten Sachen wie Border 0px scheinen ja nicht zu gehen, denn ein 1px Rand in weis ist ja dennoch zu sehen -.-'' @dreammax : schaut schon ganz gut aus... thx. ich werd mir mal das ding anschauen und dann muss ich mal abwägen ob sich der Aufwand lohnt. Vielleicht hat ja jem noch ne andere Lösung.... DHTML(JS) wäre wirklich letze Variante. + Multi-Zitat Zitieren
#5 30. Oktober 2007 AW: Select Boxen designen HTML: <html> <head> <title>start</title> <style type="text/css"> body { background-color: #dfdfdf; } select { width: 250px; border: 0px solid; /* gecko */ background-color: #ffffff; /* gecko (im ie wird background von option genommen) */ } select option { border: 1px solid #000000; /* gecko */ margin-top: 1px; /* gecko */ background-color: #efefef; /* transparent gibts nicht, das wäre immer grau */ font-weight: bold; } </style> </head> <body> <select id="mySelect"> <option>asdf</option> <option disabled="true">asdf2</option> <!-- ie erkennt disabled nicht --> <option>asdf3</option> <option>asdf4</option> </select> </body> </html> + Multi-Zitat Zitieren
#6 30. Oktober 2007 AW: Select Boxen designen Ist zwar keine direkte Lösung des Problems, allerdings weis ich nu das immer grau rauskommt bei "transparenz". Und den Button kann man dann wohl garnicht stylen, so wies ausieht.... Naja was solls. Danke trotzdem an euch . =) S + Multi-Zitat Zitieren