css代码美化-只用CSS美化选择框的实现代码

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

当我需要用下拉列表堆叠自定义表单时，我经常必须使用下拉框（选择）css代码美化，因为各个部分是特定于浏览器的，例如下拉箭头，我花了一段时间才弄清楚如何轻松地仅使用CSS美化下拉框

默认样式的下拉菜单如下所示：

这是第一个选项 第二个选项

HTML 代码：

复制代码

代码如下所示：

我们可以美化选择框的各个部分，例如字体、边框、颜色、行距和背景颜色：

这是第一个选项 第二个选项

但该死的下拉箭头保持不变。 没有办法直接美化它，但是解决办法很简单。 首先，我们需要在 select 元素周围包裹一个 div 容器：

复制代码

代码如下所示：

接下来我们需要添加一些 css 以确保选择框元素以某种方式美化：

复制代码

代码如下所示：

.styled-select 选择 {

背景：透明；

宽度：268px；

内边距：5px；

字体大小：16px；

边框：1px实心#ccc；

高度：34像素；

-webkit-外观：无； /*对于镀铬*/

我们需要保证选择框的跨度比周围的div容器宽，这样默认的下拉箭头就会消失（译者注：选择框比外面的div厚css代码美化，默认的下拉箭头将被隐藏）

这是我们将要使用的新下拉箭头：

我们的 div 容器需要美化，以便新的下拉箭头出现在我们想象的地方：

复制代码

代码如下所示：

.styled-选择{

宽度：240px；

高度：34像素；

溢出：隐藏；

背景：url(new_arrow.png)无重复右#ddd；

了解这个解决方案将使您非常容易地只用 css 来美化您的选择框。

译者注：在线秤的地址，可以自行单步进入调试

相关文章