如何将长度菜单选择选项显示为数据表中的按钮

Question

下面的长度菜单选项-显示为按钮

嗨，我最近刚开始冒险进入前端开发，这是我休闲活动的一部分，我偶然发现了数据表。我想知道如何将长度菜单的选项显示为如图所示的按钮？就我而言，数据表的样式没有可以配置成这样的设置。

我花了很长时间研究这个问题，并尝试使用length_menu类将社区建议的方法(如何将选择选项显示为按钮？(实现到livedatatable演示中(http://live.datatables.net/hideqepi/1/edit)但仍然没有运气，只有选项的颜色发生了变化，并且仍然保留在选择菜单中。。。。，你知道他们是怎么做到的吗？

Answer 1

简单地说，您实现了链接到的一个答案中给出的代码。

#results_per_page{
height: 44px;
border: none;
overflow: hidden;
}
#results_per_page::-moz-focus-inner {
border: 0;
}
#results_per_page:focus {
outline: none;
}
#results_per_page option{
width: 60px;
font-size: 1.2em;
padding: 10px 0;
text-align: center;
margin-right: 20px;
display: inline-block;
cursor: pointer;
border:rgb(204, 204, 0) solid 1px;
border-radius: 5px;
color: rgb(204, 204, 0);
}

<select name="results_per_page" id="results_per_page" multiple>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>