如何樣式選擇選項

嗨，大家好，我想知道是否有辦法讓下拉框背景顏色消失。到目前爲止，我有實際的第一部分是它說「租賃選擇類型的滑雪板」，這部分是透明的。但是當他們點擊向下箭頭時，選項的背景顏色是灰色的，我希望它沒有任何內容。我也想知道如何在點擊箭頭時擺脫選項周圍的藍色，所以沒有藍色的東西。如何樣式選擇選項

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

感謝X

來源

2017-09-22 RonTheOld

我不認爲有一種方法用CSS來做到這一點，你將不得不隱藏選擇，複製一個列表，然後複製樂趣ctionality。

這需要清理了很多，但應該讓你開始：

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(); 
    }); 
})

來源

2017-09-23 00:14:44 dave

據我所知，你在找什麼不能與內置的CSS來實現。選擇的CSS可以更改，但選擇選項的CSS自定義僅限於背景顏色和顏色，也可能更多。這是因爲該選項的樣式由瀏覽器處理。

但是和往常一樣，你可以使用一個模擬選擇框的jquery插件。然後瘋狂定製。

來源

2017-09-23 00:15:41

當你點擊它時，有沒有辦法擺脫藍色？ – RonTheOld

你的意思是在選擇活動或所選選項的背景時是否有藍色邊框？ –

圍繞選擇選項的藍色邊框，所以當你點擊箭頭和最下面的方框時出現 – RonTheOld

如何樣式選擇選項

回答

相關問題