如何样式选择选项

嗨，大家好，我想知道是否有办法让下拉框背景颜色消失。到目前为止，我有实际的第一部分是它说“租赁选择类型的滑雪板”，这部分是透明的。但是当他们点击向下箭头时，选项的背景颜色是灰色的，我希望它没有任何内容。我也想知道如何在点击箭头时摆脱选项周围的蓝色，所以没有蓝色的东西。如何样式选择选项

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

如何样式选择选项

回答

相关问题