Select Boxen designen

Dieses Thema im Forum "Webdesign" wurde erstellt von Smokers, 29. Oktober 2007 .

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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:

    [​IMG]

    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
     

  2. Anzeige
  3. #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
     
  4. #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.
     
  5. #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.
     
  6. #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>
    
     
  7. #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
     

  8. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Select Boxen designen
  1. Antworten:
    0
    Aufrufe:
    1.477
  2. Antworten:
    4
    Aufrufe:
    1.459
  3. Antworten:
    4
    Aufrufe:
    1.338
  4. Antworten:
    5
    Aufrufe:
    585
  5. Antworten:
    8
    Aufrufe:
    291