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

自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍。代码如下:<!DOCTYPEhtml><html><head><metacharset=”utf-8″><metaname=”autho…

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

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

自带的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设置一个背景图片作为下拉箭头,这样就实现了我们想要的效果。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128771.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • linux 文件重命名的命令是什么_linux移动文件并重命名

    linux 文件重命名的命令是什么_linux移动文件并重命名就目前所知道的知识,有两种方法。一、rmrm命令最简单,也更好掌握。形如:rmoldnamenewname二、renamerename命令更加健壮,不仅支持普通的文件重命名,而且还支持模式匹配。在开发速度上给我们带来了很大的便利。形如:renamefromnametonamefilenames相关例子可以参考有关文章–linux下rename用法(批量重命名)

  • pycharm无法连接服务器_pycharm部署项目到服务器

    pycharm无法连接服务器_pycharm部署项目到服务器Pycharm连接服务器Pycharm连接服务器是最为常用的内容,本文记录了Pycharm连接服务器的方法。BlueStragglers分享技术成长的乐趣目录Pycharm连接服务器1.操作步骤1.1创建连接1.2新建项目1.3运行配置2.常见问题2.1不显示Package1.操作步骤1.1创建连接首先,需要创建连接。进入Tools→Deployment→Configuration,打开配置页面。在Deployment页面的Connection

  • docker(1)下载安装for mac

    docker(1)下载安装for mac前言Docker提供轻量的虚拟化,你能够从Docker获得一个额外抽象层,你能够在单台机器上运行多个Docker微容器,而每个微容器里都有一个微服务或独立应用,例如你可以将Tomcat运行在一个D

  • centos7.4安装docker_docker打包python应用

    centos7.4安装docker_docker打包python应用前言当我们在一台电脑上搭建了python3.6的环境,下次换台电脑,又得重新搭建一次,设置环境变量等操作。好不容易安装好,一会提示pip不是内部或外部命令,一会又提示pip:commandno

  • Rpc接口压测_rpc服务接口测试

    Rpc接口压测_rpc服务接口测试前言哈喽,喜欢这篇文章的话烦请点个赞哦!万分感谢(^▽^)PS:有问题可以联系我们哦vceshiren001复制“下方链接”,提升测试核心竞争力!更多技术文章分享和免费资料领取现今有比较多的rpc框架应用于实际的生产中,像比较流行的Dubbo、Motan、Thrift、Grpc等。今天作者将以最近项目中用到的grpc为例,结合jmeter来介绍下rpc压测实施步骤。学习本文前需对rpc框架、jmeter有个大致的了解,知道rpc如何用工具生成各种语言的代码。Grpc本身是支持很多种语言的,而jm

    2022年10月13日
  • 文件上传/上传图片预览

    文件上传/上传图片预览

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号