将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。1 select {2 /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/3 border: solid 1px #000;4 5 /*很关键：将默认的select选择框样式清除*/6 appearance:none;7 -moz-appearance:none;8 -webkit-appearance:none;9 /*在选择框的最右侧中间显示小箭头图片*/ 10 background: url("http://ourjs.github.io/static/2015/arrow.png...
<!DOCTYPE html> <html > <head lang="zh"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="lib/jquery-1.11.3.min.js?1.1.11" type="text/javascript"></script><style>.mod_select ul{margin:0;padding:0;}.mod_select ul:after{display: block;clear: both;visibility: hidden;height: 0;content: ;}.mod_select ul li{list-style-type:none;float:left;height:2...
本以为可以很简单的在CSS里像input那样的给解决，结果没想到试了一下才知道常规的CSS根本没法改变的select样式，CSS里怎么弄，select都仍然是默认的那三维的样式。于是在网上搜索了一下，才知道，原来这个select是不能用常规的方法来定义CSS样式的。要用特殊的方法来处理。相信有很多朋友在处理网页的时候都会遇到这个问题，于是找了一篇不错的文章转过来，希望对大家有帮助———— 首先要告诉大家，如果你是用css的方法，除了箭头...
模拟 美化 select_脚本之家 var zQuery=function(ele,tagName,className){ //核心对象 if ( window == this ) return new zQuery(ele,tagName,className); if(!arr){var arr=new Array;} if(ele){ if(ele.constructor!=zQuery){ var elem=typeof(ele)=="object"?ele:document.getElementById(ele); if(!tagName){ arr.push(elem); }else{ var tags=elem.all&&!window.opera?tagName=="*"?elem.all:elem.all.tags(tagName):elem.get...
请选择ABCDEFGHI_select横排效果_脚本之家 *{font-size:12px;} A.s_l { BORDER: #dddddd 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #ffffff;PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px } A.s_l:hover { BORDER: #003366 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #0063dc;COLOR: #ffffff; TEXT-DECORATION: none;line-height:12px } A.s_r { BORDER: #dddddd 1px soli...
因为虽然实现起来麻烦点，如果用自带的Select，很简单的就完成了，但是本代码实际上是在向大家讲述一种Js在网页中的应用实战，多种元素之间的配合作用等。效果如下图： 下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;} h1{font-size:12px;color:#444;} ul{margin:0;padding:0;list-style:none...
先给大家看一看美化之后的效果图：CSS：.div-select {border: solid 1px #999;height: 40px;line-height: 40px;cursor: default; }.div-select-text {float: left;background-color: #fff;height: 100%;word-break: keep-all;overflow: hidden;cursor: default; }.div-select-text > div{padding: 3px;line-height: 34px;}.div-select-arrow {background-color: #fff;float: right;width: 40px;height: 100%;color: #999;cursor: d...
今天遇到一个问题， 当隐藏表格行 Tr 时 $id("tr_" + id + "_1").style.setAttribute('cssText',"display:none;");， 表格行 Tr 里面的 select 在 IE6 中隐藏不了，还是会显示在页面当中。想单独设置 select 的样式为隐藏 $id("new_attpm_id2_" + id).style.setAttribute('cssText',"display:none;"); 也隐藏不了，上网搜索找到文章《IE6下，js通过css隐藏select的一个bug》，原来这是 IE6 的一个 Bug ，可以通过 style.display ...
query是一个javascript css selector engine，小巧而功能强大，压缩后2k左右，可以很轻松的集成到代码当中。支持浏览器 IE6+、Firefox、Chrome、Safari、Opera 选择器query(selector[,context]) div #intro div#intro .red span.red [name] [name=keywords] input[name] input[name=keywords] input[name=keywords] input[name=...
模拟select 并带有提交后取得数据的代码 HTML Code 代码如下: 请选择城市 北京 上海 武汉 广州 JavaScript Code 代码如下: $(function(){ $("#dropdown p").click(function(){ var ul = $("#dropdown ul"); if(ul.css("display")=="none"){ ul.slideDown("fast"); }else{ ul.slideUp("fast"); } }); $("#dropdown ul li a").click(function(){ var txt = $(this).text(); $("#dropdown p").html(txt); var value = $(thi...
一个简单的css配合jq美化select 代码如下: 请选择… 1 2 3 代码如下: $(document).ready(function() { $('#basic-usage-demo').fancySelect(); // Boilerplate var repoName = 'fancyselect' $.get('' + repoName, function(repo) { var el = $('#top').find('.repo'); el.find('.stars').text(repo.watchers_count); el.find('.forks').text(repo.forks_count); }); var menu = $('#top').find('menu'); function posi...
我们在进行表单设计时，可能要用到select下拉选项控件，遗憾的是，IE浏览器默认的select控件外观非常丑陋，而且不能用样式来控制，不能在选项中添加图片等信息。今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单。XHTML请选择城市长沙北京南京堪培拉多伦多可以看出，我们使用div来替换下拉选项控件原生的select标签。CSS#dropdown{width:186px; margin:80px auto; position:relative} #dropdown p{width:150px; ...
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果。分享给大家供大家参考。具体如下： 这是一个JS+CSS技术实现的Select控件效果，模拟出来的，比默认的Select更漂亮，有了这个模板，你修改Select就更方便了，由此你也可以将其制作成CSS下拉菜单，在兼容性方面暂未测试，在IE8下没问题。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下：模拟select控件...
先给大家看一看美化之后的效果图：CSS：.div-select {border: solid 1px #999;height: 40px;line-height: 40px;cursor: default; }.div-select-text {float: left;background-color: #fff;height: 100%;word-break: keep-all;overflow: hidden;cursor: default; }.div-select-text > div{padding: 3px;line-height: 34px;}.div-select-arrow {background-color: #fff;float: right;width: 40px;height: 100%;color: #999;cursor: d...
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果。分享给大家供大家参考。具体如下： 这是一个JS+CSS技术实现的Select控件效果，模拟出来的，比默认的Select更漂亮，有了这个模板，你修改Select就更方便了，由此你也可以将其制作成CSS下拉菜单，在兼容性方面暂未测试，在IE8下没问题。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下： <!DOCTYPE ht...