首页 > 代码库 > 修改option的宽高无效，用div+ul做select下拉菜单
修改option的宽高无效，用div+ul做select下拉菜单
有时候设计稿的option选项的宽高都不是默认尺寸，想要修改宽高，用padding或者margin都没有用，所以就用div+ul+jq实现。
html
<div id="city"> <p class="title">查找新世界城市活动信息</p> <p>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</p> <form action="" method="post"> <div class="country"> <ul> <li class="active">中国</li> <li>美国</li> <li>英国</li> <li>法国</li> </ul> </div> <div class="status"> <ul> <li class="active">省份</li> <li>北京</li> <li>广东</li> <li>贵州</li> </ul> </div> <div class="city"> <ul> <li class="active">城市</li> <li>杭州</li> <li>苏州</li> <li>兰州</li> </ul> </div> <input type="submit" value="http://www.mamicode.com/搜 索"/> </form></div>
css
#city{ height: 340px; background: url(../img/img_30.png) no-repeat top left; padding-top: 52px;}#city .title{ font-size: 21px; opacity: 1; -line-height: 40px;}#city .title:after{ content: "——"; display: block; -line-height: 40px;}#city p{ color: #FFFFFF; font-family: "microsoft yahei"; text-align: center; opacity: 0.8;}#city form{ width: 100%; height: 168px; margin-top: 52px; padding: 0 0 0 126px;}#city form div, #city form input{ width: 236px; height: 34px; float: left;}#city form div{ margin-right: 28px; border: none; color: #a8aaaa; font-size: 12px; background-color: #FFFFFF;}#city form div:hover{ border: 1px solid #E74F4D;}#city form ul li{ width: 236px; height: 34px; line-height: 34px; font-size: 12px; color: #323333; opacity: 0.7; display: none; background-color: #e3e3e5; text-indent: 12px; font-size: 12px; color: #323333;}#city form ul li.active{ display: block; background: url(../img/images/task_1_7_1_03.png) no-repeat; background-position: 95% 50%; opacity: 1; background-color: white;}#city form ul li:hover{ background-color: #E74F4D; color: #FFFFFF;}#city form input{ background-color: #E74F4D; border: none; font-size: 14px; color: white; font-family: "microsoft yahei";}
框架样式如下
比默认的样式好看吧？
为了完全实现select的效果，需要用到jq+事件委托：
jq
$(document).ready(function(){ var oCityDiv = $("#city").find("div"); oCityDiv.mouseover(function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; var _this = $(this);//养成良好习惯，区分this的对象 if(target.nodeName.toLowerCase() == ‘li‘){ _this.find(‘li‘).css(‘display‘,‘block‘); _this.find(‘li‘).click(function(){ var _li = $(this); var iCur = _li.text(); _this.find(‘.active‘).text(iCur); }); } _this.mouseout(function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == ‘li‘){ _this.find(‘li‘).not(‘.active‘).css(‘display‘,‘none‘); } }); });});
修改option的宽高无效，用div+ul做select下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。