css 实现自定义下拉框样式

最新推荐文章于 2025-05-14 10:28:33 发布

Lucky小宇

最新推荐文章于 2025-05-14 10:28:33 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 实现自定义下拉框样式

本文链接：https://blog.youkuaiyun.com/xiaoyu015/article/details/40080573

css 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现自定义单位选择器样式的详细方法，通过内联样式控制选择器的位置、大小及外观，实现了美观且实用的单位切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.Divbg{
margin-left: 500px;
background: url(../常用的知识/select_shebei.png) no-repeat;
height: 42px;
width: 180px;
cursor: pointer;
}
.DivSelect {
position: relative;
border-width: 0px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
font-size: 18px;
width: 179px;
height: 42px;
overflow: hidden;
float: right;
}
/*设置Select样式*/
.SelectList{
position: relative;
background-color: transparent;
border-width: 0px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
display: block;
overflow: hidden;
padding-left: 10px;
width: 195px;
height: 48px;
cursor: pointer;
line-height: 48px;
font-size: 100%;
left: -2px;
top: -2px;
}
</style>
</head>
<body>
<div class="Divbg">
<div class="DivSelect">
<select class="SelectList">
<option value="0">mmHg毫米汞柱</option>
<option value="1">Kpa千帕</option>
</select>
</div>

</div>

</body>
</html>

效果如下图

效果