css - 我想为选择选项带来 css。如何为这张图片写，像这样的示例输出

Question

  <select name="productsize">
    <option value="s">s</option>
    <option value="m">m</option>
    </select>

如何为选择选项编写 css，附上示例图片。我只给出了我们要编写 css 属性的选择选项代码。我想知道我们要使用的属性是什么。

Answer 1

我认为你应该试试这个:

<style>
.productsize li{
float: left;
padding: 13px;
border: 1px black solid;
text-align: center;
margin-left: 20px;
border-radius: 21px;
cursor:pointer;
}
.productsize{
list-style-type:none;
}
.active{
background-color:grey;
}
</style>
<ul name="productsize" class="productsize">
<li value="s" >s</li>
<li value="m" >m</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>   
<script>
$("ul li").on('click',function(){
$('ul li').removeClass('active');
$(this).toggleClass("active");
});
</script>