So stylen Sie die Option

Question

Hallo Leute, ich frage mich, ob es eine Möglichkeit gibt, die Hintergrundfarbe der Dropdown-Box verschwinden zu lassen. Bis jetzt habe ich den eigentlichen ersten Teil, wo es sagt, dass "Lease Select Type Of Skis" dieser Teil ist transparent. Aber wenn sie auf den Abwärtspfeil klicken, ist die Hintergrundfarbe der Optionen grau und ich möchte, dass sie dort nichts ist. Ich fragte mich auch, wie man das Blau um die Option loswerden kann, wenn der Pfeil angeklickt wird, also gibt es kein Blau was auch immer.

HTML:

<select name="cars" class="select" id="name" autocomplete="off" placeholder="Type of ski" > 
    <option value="" disabled selected hidden>Please Select Type Of Skis. . . . . . .</option> 
    <option value="0">a</option> 
    <option value="1">b</option> 
</select> 

CSS:

body { 
    background-image: url(http://iliketowastemytime.com/sites/default/files/imagecache/blog_image/hd-wallpaper-winter-mountains-scene.jpg); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    color: white; 
    font: 16px/26px "Raleway", sans-serif; 
    text-align: center; 
} 

select { 
    font: 16px/26px "Raleway", sans-serif; 
    background: transparent; 
    color: white; 
    border: 0; 
} 

select option { 
    margin: 40px; 
    color: Red; 
    border: 0; 
    background-color: transparent; 
    -webkit-appearance: none; 
} 

Fiidle Link: Link

Dank x

Answer 1

Ich glaube nicht, gibt es eine Möglichkeit, es mit CSS zu tun Sie müssten die Auswahl ausblenden, mit einer Liste duplizieren und dann den Spaß replizieren zalität.

Dies muss viel aufgeräumt werden, aber Sie sollten den Einstieg: Was

https://jsfiddle.net/94mb53mj/

$(function() { 
    var options = $("select option").map(function() { 
    return $("<li style='display: none' data-value='" + $(this).attr('value') + "'>" + $(this).text() + "</li>") 
    }).get(); 
    var $ul = $("<ul></ul>"); 
    $ul.append(options) 
    $("select").hide().after($ul) 
    $("li").first().show().on("click", function() { 
    $(this).siblings().toggle(); 
    }).siblings().on("click", function() { 
    $("select").val($(this).data("value")); 
    $("li").first().html($(this).html()).siblings().toggle(); 
    }); 
}) 

Answer 2

ich weiß, was Sie suchen, kann nicht mit eingebautem CSS erfolgen. Das CSS der Auswahl kann geändert werden, aber die CSS-Anpassung für die Auswahloption ist auf Hintergrundfarbe und -farbe und vielleicht ein paar mehr beschränkt. Dies liegt daran, dass das Styling für die Option von den Browsern übernommen wird.

Aber wie immer können Sie ein jquery-Plugin verwenden, das die Auswahlbox emuliert. Und dann verrückt nach Anpassung.