使用div+css模拟select功能与效果

最新推荐文章于 2022-03-04 15:22:04 发布
最新推荐文章于 2022-03-04 15:22:04 发布
阅读量3.3k 收藏
点赞数
文章标签： css div input function class border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kk371558956/article/details/7001702
版权
<!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>colee做的模拟select效果</title>
<style type="text/css">
<!--
* {
 margin: 0px;
 padding:0;
}
input,img {vertical-align:middle;}
.Option .on { background:#2F67D0; color:#fff;}
-->
</style>
<script type="text/javascript">
function CoLeeSelect(thisObj){
 var thisinput = thisObj.getElementsByTagName("input");
 var thisul = thisObj.getElementsByTagName("ul");
 var thisli = thisul[0].getElementsByTagName("li");
 if(thisObj.id != "CoLeeSelect"){
  thisObj.id = "CoLeeSelect";
  thisObj.focus();
  thisul[0].style.display = "";
  for(var i=0;i<thisli.length;i++){
   thisli[i].onmouseover = function(){
    for(var j=0;j<thisli.length;j++){
     thisli[j].className = "";
     }
    this.className = "on";
    }
   thisli[i].onclick = function(){
    thisinput[0].value = this.innerHTML;
    }
   }
  }else{
   ObjBlur();
  }
  thisObj.onblur = ObjBlur;
  function ObjBlur(){
   thisObj.id =  "";
   thisul[0].style.display = "none";
   thisObj.blur();
   }
 }
</script>
</head>
<body style=" width:500px; margin:100px auto;">
<div οnclick="CoLeeSelect(this)" style="position:relative;float:left; cursor:pointer; width:120px; height:20px; background:#eee;" tabIndex=0>
  <input style="width:65px; height:18px; margin-right:-15px; cursor:pointer;" type="text" value="22222222" /><img src="u_t1.gif" />
 <ul class="Option" style="position:absolute; left: 0px; top: 20px;  border:1px #666 solid; display:none">
    <li>111111111111</li>
    <li class="on">222222222222</li>
    <li>333333333333</li>
 </ul>
</div>
<div οnclick="CoLeeSelect(this)" style="position:relative;float:left;" tabIndex=0>
  <input style="width:65px; height:18px; margin-right:-15px;" type="text" value="22222222" />
  <img src="u_t1.gif" />
 <ul class="Option" style="position:absolute; left: 0px; top: 20px;  border:1px #666 solid; display:none">
    <li>111111111111</li>
    <li class="on">222222222222</li>
    <li>333333333333</li>
 </ul>
</div>
</body></html>
kk371558956
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js、html、css实现自定义select框（带搜索框和滚动条）
Blank
10-14 4656
原生js、html、css实现自定义select框（带搜索框和滚动条）
CSS实现的Select下拉框
别在熬夜了！
12-17 2066
CSS实现的Select下拉框 scHTML='selectÁбí' document.write(scHTML) vDiv=selectcontent vDivHtml=selecthtml function editselect(name,size,defaulttext,width,height,readonly){   var combo=this;
自动化测试元素定位-CssSelector常用定位方式总结
u013976938的专栏
03-04 2442
CSS选择器的常见语法： 1. 根据 标签定位 tagName(定位的是一组，多个元素） e.g：find_element_by_cssSelector("div") 2. 根据 id属性定位(注意id使用#表示） e.g: find_element_by_cssSelector("#eleid") e.g: find_element_by_cssSelector("div#eleid") 3. 根据className属性定位（注意class属性使用.) e.g: find_element_.
动态联动select下拉框实现
直到世界的尽头
05-22 2万+
我们在做下拉框选择时，常常会遇到一种场景，就是需要两个下拉框，其中一个下拉框的选项和内容需要根据第一个的下拉框的选择动态变化。比如我有大的分类:有氧运动  无氧运动选择有氧运动时，选项有：跑步，游泳选择无氧运动时，选项有：深蹲，卧推本章记录如何实现动态联动select下拉框实现。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录动态联动se
CSS自定义select下拉选择框的样式(不用其他标签模拟)
热门推荐
--- 清水思源的专栏 ---
02-03 3万+
select这个东西只靠纯CSS是不能解决这个自定义样式问题的，但还是可以改一点点的。  首先对于默认的样式，刚开始想到使用背景，但经试验对select设置背景是无效的，于是后来就想到了覆盖，用其它元素把那个向下的箭头盖住，然后给这个元素设置背景，写了个demo发现可行，于是就有了下面的这些。  首先用一个a标签套住select：  复制代码 代码如下:  
div+css模拟select
02-10
一、为什么使用div+css模拟select？ 1. **样式可控**：使用HTML `div`元素，可以自由地应用CSS样式，实现自定义背景、边框、字体等，以匹配网站的整体设计风格。 2. **交互性增强**：通过JavaScript或jQuery等库，...
div+css select效果
11-14
本教程将详细讲解如何使用`div+css`来实现一个兼容多浏览器的美化版`select`效果。 首先，我们需要创建一个`div`元素作为`select`的替代品，这将作为我们自定义样式的容器。通过设置`position`属性为`relative`，...
美漂亮的实用div+css模仿select下拉控件
03-13
在本项目中，“美漂亮的实用div+css模仿select下拉控件”是一个使用JavaScript（jq，即jQuery库）实现的，旨在提供一种更美观、用户体验更好的下拉选择功能。接下来，我们将详细探讨这个项目中的关键知识点。 1. **...
DIV+CSS+JS仿Select下拉表单
10-10
【标题】"DIV+CSS+JS仿Select下拉表单"是前端开发中常见的一个技术实践，它旨在通过HTML的`<div>`元素、CSS样式和JavaScript脚本，实现一个功能与原生`<select>`标签类似的下拉选择器。这种自定义下拉表单在界面设计...
动态改变select option时，宽度自动变短解决方法
lchina1314的专栏
04-08 2406
代码不应该是先设置属性在追加，而应该是先追加再设置属性。 原因是 追加DOM要先追加后设置属性，否则会有reflow发生。             JQuery                   -->       function add(){        var obj = document.getElementByIdx('lst1');
divcss模拟select
11-15
divcss模拟select 下拉框 select 改变样式
js模拟权限选择实现代码(select操作)
10-28
权限选择页面，选择、撤回、全部选择、全部撤回
div模拟select实用版
05-25
使用div模拟select效果,可点击页面其他任意地方隐藏下拉框
div+css模拟select下拉框
weixin_30302609的博客
06-12 419
<!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="lib/jquer...
用div元素模拟select下拉框
weixin_41266588的博客
04-28 1259
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试</title> <!--jquery 记得换成自己路径下的jq文件 或者使用网络地址--> <script type="text/javascript" src="js/jque...
div 模拟select
zhaossdut的专栏
08-27 358
筛选                                                                                                                                                      普陀区                             黄浦区
div模仿select下拉框
weixin_30799995的博客
09-17 385
由于css不能修改select option的样式，使用起来不灵活， 所以写一个用div效仿的select下拉框。 html <div class="aside__status-text___3dXKm"> <span><div class="status_circle status_circle_online"><...
js模拟select控件
HELLO WORLD
05-25 1481
思路： 设置一个select容器，把select放在里面并且设置隐藏，放置一个存放选中的文本值，使用ul列表代替option。当列表元素触发click的时候设置对应的option设置选中，并且给select设置value 此次项目select控件是cms生成出来的从前端无法调整样式，所以只能考虑使用js模拟，代码匆忙中完成并未精简，如有更好的方案，还原共同讨论。 具体代码： HTM...
用div+jquery模拟multipleSelect的代码
最新发布
03-09
以下是用div和jquery模拟multipleSelect的代码： HTML代码： ``` <div class="multiple-select"> <div class="select-box"> <div class="selected-items"></div> <div class="arrow"></div> </div> <div ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值