Wie Stil <select> - Elemente?

Wie kann ich die völlig verändern das design ein <select> element? Zum Beispiel ist dies, wie ich möchte, dass meine dropdown-Liste Aussehen:

Screeshot http://i56.tinypic.com/2n7h7uv.png

Gibt es eine Möglichkeit mit CSS? Wenn nicht, jQuery?

Die Antwort hängt von der OS/browser/ - version, was sind Sie targeting?
ist dort Grund, warum Sie donot wollen, gehen Sie mit jquery? es kann sehr einfach durchgeführt werden, wenn Sie jquery verwenden..
Ich empfehle, dass Sie nicht "jQuery" zu ersetzen wählen. Für alle die wunderbaren Dinge, die jQuery nicht, die jQuery UI ist in der Regel ein usability-Greuel. Verwenden Sie eine echte <select> - element, der Stil, wie Sie, und akzeptieren Sie, dass einige Browser haben eine (gerechte) Entscheidung für die Verwendung mit standard-OS-level-widgets mit manchmal beschränkten Stil verpasst. Die Nutzer mit dem iPhone, zum Beispiel, wird sehr vielen Dank für die nicht-Verwendung einer JavaScript-DHTML-basierte "Lösung" einfach so Dinge, die hübsch Aussehen.

InformationsquelleAutor Jared | 2011-01-30

  1. 5

    CSS hilft Ihnen nur in bestimmten Browser - beispielsweise Internet Explorer Ignoriere es Wählt ganz

    können Sie jedoch noch verwenden Sie eine gewöhnliche wählen Sie auf der Seite ohne CSS zu löschen und verwenden Sie dann ein jQuery-plugin, dass degradiert anmutig (also, wenn die Menschen nicht haben JS aktiviert ist, werden Sie noch sehen, die ursprüngliche select-box)

    eines solchen plugins ist dieses tolle jQuery UI selectmenu von der Filament Group

    jedoch, wie bereits von clonked in den Kommentaren - zumindest einige browser-sniffing, um zu überprüfen, ob man nicht den Zugriff auf das Menü vom iPhone oder ähnlichen Geräten, wie Sie möglicherweise Probleme haben, den Zugriff auf die JS select box

    wenn Sie durch Zufall mit Hilfe von PHP auf der server-Seite, hier ist ein schönes browser-sniffing-Bibliothek für Sie: http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

    InformationsquelleAutor Zathrus Writer

  2. 2

    Haben Sie Fragen, erreichen konsistente Gestaltung einer <select> - element mit CSS allein. Ihre beste Wette ist, um jquery verwenden. Zum Glück ein sehr nettes plugin bereits erstellt wurde:

    http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

    Wie bereits in den Kommentaren auf diese Seite: "Hmmm.. Sollte man nicht die Funktionalität von form-Elementen werden, bis zu dem browser? Zum Beispiel, dieser tötet die auswählen, die angezeigt wird auf dem iPhone (und bald auch das iPad), die am besten geeignet für diese Plattform." ich kann nicht downvote, weil du geantwortet hast, den Wunsch der OP...aber ich muss darauf hinweisen, dass das, was der OP fordert, ist schädlich.
    Ich Stimme mit Ihnen überein, diese Art von Funktionalität ist nicht etwas, was ich besonders gerne deren Umsetzung. Aber manchmal Projektanforderungen überwiegen der richtige Weg, Dinge zu tun 🙂 am besten mit der bevorstehenden jquerymobile.com würde dazu beitragen, einige dieser Bedenken für mobile Geräte. Ich würde auch behaupten, dass, bis die browser-Hersteller erlauben alle html-Elemente formatiert werden wie gewünscht mit CSS-Menschen, die wir auf der Suche nach alternative Methoden, wie die selectmenu() plugin.

    InformationsquelleAutor Nathan Anderson

  3. 2

    Gibt es mehrere jQuery-plugins, die Ihnen helfen, erreichen dies.

    Hier ist eine Licht-Gewicht: http://www.adamcoulombe.info/lab/jquery/select-box/

    Und hier ist ein tutorial zum bauen von Grund auf neu, mit Bildern:
    http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

    InformationsquelleAutor mVChr

  4. 1

    Können Sie versuchen, den folgenden Weg. Wo selectBg.png ist 1px hintergrund Bild. Es gibt eine Ausgabe wie folgende Bild:

    Wie Stil <select> - Elemente?

    CSS-Code:

    select.onlyOne {
    background: url("./theme/default/images/selectBg.png") repeat scroll 0 0 transparent;
    border: 0 none;
    color: #747862;
    font-size: 12px;
    font-weight: bold;
    height: 40px;
    margin-bottom: 0;
    padding: 8px 4px 8px 0;
    width: 430px;
}

    HTML-Code:

    <select class="onlyOne" name="somename">
   <option value="somevalue">somevalue</option>
   <option value="somevalue">somevalue</option>
</select>

    InformationsquelleAutor enam

  5. 0

    Können wir in der Lage zu entwerfen select-tag mit jquery Kodierung, Überprüfen Sie die Codierung unter

    (document).ready(function() {
$('#btn-add').click(function(){
    $('#select-from option:selected').each( function() {
            $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-remove').click(function(){
    $('#select-to option:selected').each( function() {
        $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-up').bind('click', function() {
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) - 1;
        if (newPos > -1) {
            $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});
$('#btn-down').bind('click', function() {
    var countOptions = $('#select-to option').size();
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) + 1;
        if (newPos < countOptions) {
            $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});

    });
    und der html-code ist

    </select>
<a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
<a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>
<select name="selectto" id="select-to" multiple size="5">
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
  <option value="7">Item 7</option>
</select>

    InformationsquelleAutor Best website designer

  6. -2

    es ist unmöglich!

    Stil wird simuliert durch andere html-tags und css!

    InformationsquelleAutor mier

Schreibe einen Kommentar