【技术】搜索框(ie6下搜索图片在input框外)

父级div需定宽和高:

    

<div class="ui-search-wrap">
<input type="text" class="ui-search" placeholder="请输入">
<input type="button" value="" class="ui-but">
</div>

.ui-search-wrap{
display: inline-block;
position: relative;
width: 164px;    /*定宽*/
height: 24px;    /*定高*/
}
.ui-search-wrap .ui-search{
height: 28px;
line-height: 28px;
padding: 0 10px;
border-radius: 3px;
border: 1px solid #C1C1C1;
outline: 0 none;
}
.ui-search-wrap .ui-search-over{
border: 1px solid #FF6600;
transition: 0.3s
}
.ui-search-wrap .ui-but{
border: 0 none;
width: 35px;
height: 28px;
position: absolute;
top: 1px;
right: 1px;
background: url(../images/search_btn.png) no-repeat 0 0;
cursor: pointer;
}
.ui-search-wrap .ui-but-over{
background: url(../images/search_btn.png) no-repeat 0 -29px;

}

时间: 2024-11-02 12:13:34

【技术】搜索框(ie6下搜索图片在input框外)的相关文章

浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自动弹出搜索提示

对于通过用户输入关键词实现自动弹出相关搜索结果,这里本人给两种解决方案,用于两种不同的情形. 常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的关键字异步调用数据表中的相关数据,显示在一个隐藏div中. 第二种方式也就是我现在着重讨论的方式,适用于单个用户,基于此用户以往的搜索数据来实现搜索提示功能.技术关键是记录下用户的以往搜索数据,写入cookie,然后页面从用户本机cookie调用数据. ok,下面进入正题.本文主要讲实现步骤,代码可根据自己实际需要更改. 一,如何写入co

java简单的实现搜索框的下拉显示相关搜索功能

最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 搜索框相关搜索的展示很简单,就是根据你的搜索词,去数据库中匹配,是否有类似的搜索词存在,按照搜索词被搜索的次数进行排序显示出来 我设计的是每次搜索一个词,提交之后都会去数据库进行查询,看是否存在这个搜索词的搜索,若存在,则对数据库中的这个搜索词对象进行次数加1,不存在,则创建这个新搜索词对象,保存在

最近遇到一个很纠结的问题:jquery.autocomplete在IE6下被下拉框遮挡 。

最近遇到一个很纠结的问题:jquery.autocomplete在IE6下被下拉框遮挡 . 如图: 网上找到原因,例如:http://www.360doc.com/content/10/1126/16/2197500_72641076.shtml 但是,我们的问题是我们用了jquery.autocomplete这个控件,这些方法对于我们就不行了. 废话多了,直接解决方法: 第一步:打开jquery.autocomplete.min.js(或者直接jquery.autocomplete.js),找

IE6下 input 背景图滚动问题

ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300px; background:url(%E7%BB%83%E4%B9%A0%E8%A1%A8%E6%A0%BC/mon.jpg) no-repeat; background-color:#fcf; border:1px solid #069; } .box input{height:20px; width:30

6个漂亮的Web前端表单提交以及搜索框(下)

4.jQuery圆形修边注册表单 能在支持 FireFox.Chrome.Safari.傲游.搜狗.360浏览器. 源码下载/  在线演示 5.  HTML5超酷表单展示效果 源码下载  /  在线演示 6.  纯CSS3实现的紫色登录表单 源码下载 /  在线演示 6个漂亮的Web前端表单提交以及搜索框(下)

js input框输入1位数字后自动跳到下一个input框聚焦

// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); for(var i = 0; i<txts.length;i++){ var t = txts[i]; t.index = i; t.setAttribute("readonly", true); t.onkeyup=function(){ this.value=this.value.

如何去除input框在谷歌浏览器下的黄色底纹

现象:谷歌浏览器下input框有默认记住功能,此时若选择了历史输入的内容,则变成如下图:非历史输入,是没有的. 方法一 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}此法仅适用纯色背景: 方法二 input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofil

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

我在给公司的一个H5页面添加搜索框,前端原先就用的mui,正常添加input框后,手机测试出现了问题: Android : input框有内容搜索跳转后,按返回键,input不能聚焦,键盘不弹出 IOS : 正常进入页面input框不能聚焦,键盘不弹出,多次点击可能会聚焦 代码如下: <div> <a class="mui-btn mui-btn-link" style="float: right;width: 14.5%;height: 34px;&quo

表格 列表 form input 下拉选择 评论框

今日内容 img图片 a标签 列表 标题列表 特殊符号 表格 form标签 input(单选多选 重置 选择文件 选择年月日)button(提交按钮) textarea(评论框)select(下拉选择框) textarea(评论框) 博客园评论 标题 h1 h2 h3 h4 h5 h6 列表 ol ul li dl dt dd 排版标签 p div hr center pre 表格 table 表单 form 域名解析 域名 -- ip地址 -- 192.168.1.10 https://192