说明:传统的做法是给外部盒子relative定位,再给弹出框absolute定位,而这里我们将absolute独立使用

html

    <div class="search">
<ul id="result">
<li><a href="#">分享:CSS深入理解之float浮动</a></li>
<li><a href="#">案例:CSS圆角进化论</a></li>
<li><a href="#">案例:CSS Sprite雪碧图应用</a></li>
<li><a href="#">案例:CSS3 3D 特效</a></li>
</ul>
<input type="text" class="search-input" placeholder="课程搜索">
<a href="javascript:;" class="search-btn">搜索</a>
</div>

css

        .search{margin:20px;overflow:hidden;}
.search .search-input{width:200px;line-height:18px; padding:10px; margin:; border:0 none;font-size:12px;font-family:inherit; float: left; }
.search.focus{border-color: #2ea7e0; }
.search .search-input:focus{outline:0 none;}
.search .search-btn{width:38px;height:38px;float:left;background: url(images/search.png);text-indent:-9em;overflow:hidden; }
.search.focus .search-btn{background-position:0 -38px;}
#result{
display:none;
position:absolute;
width:260px;
margin:39px 0 0 -1px;
padding-left:;
list-style-type:none;
border:1px solid #e6e8e9;
background-color:#fff;
box-shadow:0px 1px 2px #d5d7d8;
font-size:12px;
}
#result>li{line-height:30px;padding-left:12px; }
#result>li:hover{background-color:#f9f9f9;}
#result a {display:block;color: #5e5e5e;text-decoration: none; }
#result a:hover {color:#000; }

javascript

(function() {
var input = document.getElementsByTagName("input")[0],
result = document.getElementById("result"); if (input && result) {
input.onfocus = function() {
this.parentNode.className = "search focus";
if (this.value !== "") {
result.style.display = "block";
}
};
input.onblur = function() {
if (this.value === "") {
this.parentNode.className = "search";
}
result.style.display = "none";
}; // IE7 that wrap a DIV for avoid bad effect from float
if (!document.querySelector) {
var div = document.createElement("div");
input.parentNode.insertBefore(div, input);
div.appendChild(result);
}
// events of datalist
if ("oninput" in input) {
input.addEventListener("input", function() {
if (this.value.trim() != "") {
result.style.display = "block";
} else {
result.style.display = "none";
}
});
} else {
// IE6-IE8
input.onpropertychange = function(event) {
event = event || window.event;
if (event.propertyName == "value" && /focus/.test(this.parentNode.className)) {
if (this.value != "") {
result.style.display = "block";
} else {
result.style.display = "none";
}
}
};
}
} })();

absolute独立使用之下拉框最佳实践的更多相关文章

  1. ASP.NET MVC之下拉框绑定四种方式(十)

    前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...

  2. yii2组件之下拉框带搜索功能(yii-select2)

    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有. ...

  3. 转:python webdriver API 之下拉框处理

    下拉框也是 web 页面上非常常见的功能,webdriver 对于一般的下拉框处理起来也相当简单,要想定位下拉框中的内容,首先需要定位到下拉框:这样的二次定位,我们在前面的例子中已经有过使用,下面通过 ...

  4. thymeleaf之下拉框回显选中

    #1.select下拉框取值    <div class="form-group ">        <label id="resource" ...

  5. 插件之下拉框Select2

    select2为代替常规的select而出现,可自定义select的样式,最明显的功能就是集合中可以搜索 关于浏览器要求,ie8+,Chrome 8+,Firefox 10+,Safari 3+,Op ...

  6. 【Python+selenium Wendriver API】之下拉框定位

    上代码: # coding:utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains impo ...

  7. Python自动化之下拉框,隐藏标签定位 代码&报错解决

    python自动化:下拉框定位方法之select标签  style="display: none;" 报错 selenium.common.exceptions.ElementNo ...

  8. Selenium之下拉框操作

    下拉框操作: 一般下拉框适用场景:在新增时有下拉框选项,在二级联动或多级联动有下拉(比如:在选择省市县时的多级联动下拉). 下拉框选择都有select的标签属性,存在两个属性select和option ...

  9. (十一)easyUI之下拉框

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

随机推荐

  1. 问题-[Delphi7]程序在WIN7电脑上的日期错误处理

    问题现象:我想大家都遇到过在XP上没有问题的日期格式,到了WIN7之后就不行了. 问题原因:因为在WIN7中增加了新的日期格式,但是老的DELPHI未处理(如果我说错了,希望高人指点). 问题处理: ...

  2. BOM 和 JavaScript 中的 trim

    今天遇到一个 IE7 下 JSON.parse 失败的问题.经过排查发现:服务端某个配置文件编码是 UTF-8 + BOM,输出的字符串最开始包含了 BOM 字符,不是合法的 JSON. IE7 不支 ...

  3. 11.编写一个Java程序,计算半径为3.0的圆周长和面积并输出结果。把圆周率π定义为常量,半径定义为变量,然后进行计算并输出结果。

    package com.hanqi.yzljs; public class yzljs { public static void main(String[] args) {     final dou ...

  4. wxPython 对话框关闭后进程无法退出的原因

    wxPython中不要用对话框作为主程序wx.Dialog,这会导致程序关闭后进程无法退出.一种可行的做法是用wx.Frame代替

  5. Derby使用2—C/S模式

    零.回顾 这部分先来回顾一下上一篇博客中的主要内容.上一篇博客中主要简单介绍了Derby数据的历史,特点,安装以及使用的两种模式.这篇文章主要介绍这两种模式中的一种模式 一.启动服务端程序 第一部分主 ...

  6. MySQL参数优化

    目前针对MySQL数据库进行了一些参数优化,具体如下: my.ini / my.cnf 参数说明 #使用查询缓存 query_cache_size=100M                     # ...

  7. 关于Bufferedreader的功能扩写

    package cn.hncu.pattern.decorator.v1; import java.io.FileReader;import java.io.IOException; public c ...

  8. hdu2565java

    放大的X Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissio ...

  9. JavaScript平常会跳的坑系列(一)

    function Foo() { //定义foo函数 getName = function () { console.log('1');}; console.log(this); return thi ...

  10. 实现方法 C# button快捷键

    本文讲解了三种方法实现C# button快捷键,如Alt + *(按钮快捷键),Ctrl+*及其他组合键等. C# button快捷键之第一种:Alt + *(按钮快捷键) 在大家给button.la ...