修改select下拉菜单样式(input下拉框select)

全栈程序员站长

发布于 2022-07-28 19:03:29

3.4K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

自带的select下拉菜单美观度实在不怎么样，并且不容易美化，当然我们可以模拟实现select下拉菜单，但是代码稍显复杂，不过也可以通过简单的CSS实现此效果，下面通过实例简单作一下介绍。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端学习扣qun：731771211  每日分享技术，学术交流</title>
<style type="text/css">
.select_style{
  width:240px; 
  height:30px; 
  overflow:hidden; 
  background:url(mytest/demo/bg.jpg) no-repeat 215px; 
  border:1px solid #ccc; 
  -moz-border-radius:5px; /* Gecko browsers */ 
  -webkit-border-radius:5px; /* Webkit browsers */ 
  border-radius:5px; 
  margin:150px;
} 
.select_style select{ 
  padding:5px;
  background:transparent; 
  width:268px; 
  font-size:16px; 
  border:none; 
  height:30px; 
  -webkit-appearance:none; /*for Webkit browsers*/ 
} 
</style>
</head>
<body>
<div class="select_style"> 
  <select name="select"> 
    <option>星期1</option> 
    <option>星期2</option> 
    <option selected>星期3</option> 
    <option>星期4</option> 
  </select> 
</div> 
</body>
</html>

以上代码实现了实现了select下拉框美化效果，当然这里也谈不上美观，因为在这里只是介绍一下它的实现原理，以供大家改造之用，下面简单介绍一下它的实现过程:

实现原理:

其实select下拉菜单美化最让人蛋疼的地方就是向下的箭头，在这里我们在select下拉菜单外面套了一个div，并且div的宽度小于select下拉菜单的宽度，这样的目的是将select下来菜单的箭头给遮挡，然后再给次div设置一个背景图片作为下拉箭头，这样就实现了我们想要的效果。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/128771.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月1，如有侵权请联系 cloudcommunity@tencent.com 删除

https