表单2-下拉菜单

/* 表单2 */ form.bs-docs-example {  position: relative;  width: 600px;  margin: 15px auto;  padding: 39px 19px 14px;  background-color: white;  border: 1px solid #DDD;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px; }

form.bs-docs-example::after {  content: "Example";  position: absolute;  top: -1px;  left: -1px;  padding: 3px 7px;  font-size: 12px;  font-weight: bold;  background-color: #F5F5F5;  border: 1px solid #DDD;  color: #9DA0A4;  -webkit-border-radius: 4px 0 4px 0;  -moz-border-radius: 4px 0 4px 0;  border-radius: 4px 0 4px 0; }

div.input-prepend{  position: relative;  display: inline-block;  margin: 10px;  font-size: 0;  white-space: nowrap;  vertical-align: middle;  box-sizing: border-box; } div.btn-group {  position: relative;  display: inline-block;  font-size: 0;  white-space: nowrap;  vertical-align: middle; } button.dropdown-toggle {  display: inline-block;  padding: 4px 12px;  margin-bottom: 0;  margin-right: -1px;  height: 30px;  line-height: 20px;  border: 1px solid #CCC;  border-radius: 4px 0 0 4px;  font-size: 14px;  color: #333;  text-align: center;  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);  cursor: pointer;  background-color: #e5e5e5;

}

span.caret {  display: inline-block;  content: "";  width: 0;  height: 0;  margin-top: 8px;  vertical-align: top;  border-top: 4px solid black;  border-right: 4px solid transparent;  border-left: 4px solid transparent; }

input.span2 {  display: inline-block;  padding: 4px 12px;  height: 20px;  line-height: 20px;  vertical-align: top;  }

.clear {  clear: both; }

ul.dropdown-menu li {  heiht: 20px;  line-height: 20px; }

ul.dropdown-menu li a {  display: block;  padding: 3px 20px;  clear: both;  font-weight: normal;  line-height: 20px;  color: #333;  white-space: nowrap; }

ul.dropdown-menu  {  display: block;  position: absolute;  top: 100%;  left: 0;  font-size: 14px;  float: left;  min-width: 160px;  padding: 5px 0;  margin: 2px 0 0;  list-style: none;  background-color: white;  border: 1px solid #CCC;  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  -webkit-background-clip: padding-box;  -moz-background-clip: padding;  background-clip: padding-box; }

ul.dropdown-menu li.divider {  height: 2px;  margin: 9px 1px;  overflow: hidden;  background-color: #E5E5E5;  border-bottom: 1px solid #fff;  }

<!-- 表单2 -->
<form class="bs-docs-example">
 <div class="input-prepend">
  <div class="btn-group">
   <button class="dropdown-toggle">
    Action
    <span class="caret"></span> 
   </button>
   <ul class="dropdown-menu">
    <li><a href="#">中国</a></li>
    <li><a href="#">英国</a></li>
    <li><a href="#">法国</a></li>
    <li class="divider"></li>
    <li><a href="#">加拿大</a></li>
    <div class="clear"></div>
   </ul>
  </div>
  <input type="text" class="span2"/>
  
 </div>

</form>

*

IE6下hover伪类显示隐藏子元素bug及解决方案

HTML代码及CSS代码:

这段代码在除了ie6外的其他浏览器中均能完美呈现,可一到ie6就出问题了。

BUG1:子元素不显示

在ie6下,当鼠标hover到a元素时,b元素并没有如预期所想显示出现。

周所周知,ie6/7的bug大多数可通过出发hasLayout来解决,那么我们可以试想一下是否能通过触发hasLayout来解决。由于a、b元素已经有了宽高,已经触发了hasLayout,那么是否可以在a的伪类上触发呢?

尝试添加以下代码:

1 .a:hover{
2     zoom:1;
3 }

再看看ie6,问题已经得到解决,hover时b元素可以正常显示。

BUG1解决方案:

为hover伪类添加zoom:1属性,触发伪类的hasLayout。

目前CSS代码如下:

但是,当我们把鼠标移开a元素后,发现ie6下b元素没有全部消失。

BUG2:子元素hover后不消失

这个bug有点诡异,估计是渲染的时候出了错,ie6经常会有这种莫名其妙的问题,由于a、b元素及a的伪类均触发了hasLayout,目前能触发hasLayout的元素已经不存在了,因此触发hasLayout的这个方案暂时可以放弃。

转变一下思路,既然问题出在display上,那么不改变b元素的display属性能否解决这个bug呢?

那么,我们在不改变display属性的情况下尝试用另外一种方法将b元素进行显示、隐藏。

方案一:

hover前为a元素添加overflow:hidden,hover后改变overflow的值为visible,并去掉对b元素display属性的修改,代码如下:

问题得到解决,ie6下效果完美。

等等。。。

如果某些情况不能通过改变overflow的值时,能否有另外一种解决方案?

关于元素显示隐藏的css属性,除了display外,还有另外一个属性:visibility,那么,能否使用这个属性来解决问题呢?

方案二:

为ie6的b元素添加visibility属性,代码如下:

ie6下测试通过,看来这个方案也可行。关于display及visibility属性的不同,可自行google查阅,此处不做讨论。

当然,相信有同学已经想到另外一种对b元素进行显示及隐藏的方法,通过改变b元素的left/top/right/bottom值实现,此处以left值为例,代码如下:

这样在ie6下也可以实现显示、隐藏元素的效果,解决方案多多,也许还有其他不同的方案,欢迎大家一起探讨!

BUG2解决方案:

1. 通过改变hover伪类元素的overflow值来隐藏显示子元素;

2. 通过visibility属性来显示隐藏子元素;

3. 通过改变子元素left/top/right/bottom的值进行元素的显示及隐藏。

时间: 2024-10-12 12:14:50

表单2-下拉菜单的相关文章

简单的单级下拉菜单实现

效果预览 这里用纯CSS实现一个简单的单级下拉菜单,鼠标划过菜单标题时显示下拉菜单. 基本思路 在菜单处于光标之下时显示菜单,其余时候隐藏.这个过程首先得想到 :hover 伪类来实现,但是直接的利用伪类还不行,因为普通状态下菜单隐藏了,没办法触发 :hover ,不过下拉菜单隐藏了不是还有菜单标题么,菜单标题处于光标之下时显示菜单就能够显示出来了,但是鼠标移到菜单上的时候下拉菜单又会消失,这个时候想到给下拉菜单也加上 :hover 显示自身,但是万一脑洞大开,要做分体菜单怎么办,这个时候把它放

form表单中的 下拉菜单 所有的省份

<p style="margin-bottom:30px;"><span style="color:red;">*</span>所属省份 :<select style="height:40px;margin-left:24px;"><option value="">--请选择省份--</option><option value="北京市&q

15-08-02 例子:下拉菜单(阻止事件冒泡函数)

做一个下拉菜单,当点击表单元素时显示下拉菜单,鼠标放到菜单元素上时改变元素背景色,将菜单中选中的值传到表单中,当点击表单及下拉菜单时外的其他地方时,下拉菜单消失. <title>下拉菜单</title> <style type="text/css"> * { margin:0px; padding:0px; } #pingmu { width:100%; height:100%; position:fixed; background-color:#F

Bootstrap单按钮的下拉菜单

简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootstrap 版本中. 完整代码: <!DOCTYPE HTML><html><head><link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <scr

【网摘】C#.NET 在 MVC 中动态绑定下拉菜单的方法

1. 已知下拉菜单列表项: 在 Controller 控制器类中输入已下代码  1 public class DemoController : Controller 2 { 3     public ActionResult BindDropDownList() 4     { 5         List<SelectListItem> select1 = new List<SelectListItem> 6         { 7             new SelectL

表单开发(二):获取单选按钮,多行文本框,下拉菜单,捆绑元素数据,用户注册

单选按钮:<input type="radio"> 多行文本框:<textarea rows="5" cols="30"></textarea> 下拉菜单:seclet option <select name="home" ><!--下拉列表--> <option value="北 京">北 京</option> <o

邮件审批:表单作为邮件内容展示问题处理过程1——下拉菜单select问题

在仿照费控和用友做邮件审批时,增加了对表单内容的显示.在系统中做审批时,表单内容有丰富的控件展示,简单的有input,textarea,radio,复杂的有自定义的审批控件.附件控件和人员选择器等.目前复杂控件展示没有问题,复杂控件为只读状态时,展示给用户的就是普通的input或table:简单控件中当为select时出现无法绑定值的问题.即不管其选中项是什么,展示出来的始终是第一项. 根据问题症状,之前在审批展示时,也出现过因下拉菜单展示有问题(如始终展示第一项或最后一项)导致的问题.究其根源

DOM访问HTML元素的方式,DOM访问表单控件的常用属性和方法,DOM访问列表框、下拉菜单的常用属性,DOM访问表格子元素的常用属性和方法,DOM对HTML元素的增删改操作

DOM访问HTML元素的方式 为了动态地修改HTML元素,须先访问HTML元素.DOM主要提供了两种方式来访问HTML元素: 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素. 利用节点关系访问HTML元素.常用的属性和方法如下: parentNode 返回当前节点的父节点 previousSibling 返回当前节点的前一个兄弟节点 nextSibling 返回当前节点的后一个兄弟节点 childNodes 返回当前节点的

JS对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播(主要练习对于样式表的操作)

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

yii2框架dropDownList的下拉菜单用法介绍

Yii2.0 默认的 dropdownlist 的使用方法.  代码如下 复制代码 <?php echo $form->field($model, 'name[]')->dropDownList(['a' => 'Item A', 'b' => 'Item B', 'c' => 'Item C']); ?> 在yii2中加放请选择的下拉菜单  代码如下 复制代码  <php echo $form->field($model, 'name[]')->