if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="/m/view.php?aid=27";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}
织梦CMS - 轻松建站从此开始!

金冠娱乐_金冠娱乐场 上海精控光纤设备有限公司

当前位置: 主页 > 网页基础 > DIV&CSS >

用CSS设计你的搜索框

时间:2010-04-07 09:32来源: 作者: 点击:
今天我将介绍一下如何使用CSS中的背景图片来设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框,但是这种方法看起来会更容易些,所以我想将它与感兴趣的朋友分享。 View Demo 原始方式 首先来让我们看看我的原始的使用input type=image src=image_u
var _mda_place_id ="58bcc82381892";

今天我将介绍一下如何使用CSS中的背景图片来设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框,但是这种方法看起来会更容易些,所以我想将它与感兴趣的朋友分享。

原始方式


首先来让我们看看我的原始的使用的方法:







这看起来挺不错的,但是它有一个不好的地方,这个图片按钮不会和搜索框对其,我必须使用一个负的margin-top属性来修正这个bug。

改良方法

在这个改良版的方法中,我决定不再使用 type=”image” ,而是使用


CSS
fieldset.search {
border: none;
width: 243px;
margin: 0 auto;
background: #222;
}
.search input, .search button {
border: none;
float: left;
}
.search input.box {
color: #fff;
font-size: 1.2em;
width: 190px;
height: 30px;
padding: 8px 5px 0;
background: #616161 url(search_bg.gif) no-repeat;
margin-right: 5px;
}
.search input.box:focus {
background: #616161 url(search_bg.gif) no-repeat left -38px;
outline: none;
}
.search button.btn {
width: 38px;
height: 38px;
cursor: pointer;
text-indent: -9999px;
background: #fbc900 url(search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
background: #fbc900 url(search_bg.gif) no-repeat bottom right;
}

IE特别注释

IE 样式- ie.css
朋友评论说如果输入文字过多IE6和IE7会水平滚动背景图片,所以我的方法是专门为IE使用一个单独的背景图片 ,而且不是让它左对齐,我翻转了它,通过让背景图片右对齐来修正这个。
.search input.box {
background: url(search_bg_ie.gif) no-repeat right bottom;
  /* 专门为IE的独立背景图片,而且这个图篇必须是右对齐的。***/
}

(责任编辑:admin)
织梦二维码生成器 var __dedeqrcode_id=7; var __dedeqrcode_aid=27; var __dedeqrcode_type='arc'; var __dedeqrcode_dir='/plus';
顶一下
(0)
0%
踩一下
(0)
0%
getDigg(27);
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
function LoadCommets(page) { var taget_obj = document.getElementById('commetcontent'); var waithtml = "
评论加载中...
"; var myajax = new DedeAjax(taget_obj, true, true, '', 'x', waithtml); myajax.SendGet2("/plus/feedback_ajax.php?dopost=getlist&aid=27&page="+page); DedeXHTTP = null; } function PostComment() { var f = document.feedback; var nface = '6'; var nfeedbacktype = 'feedback'; var nvalidate = ''; var nnotuser = ''; var nusername = ''; var npwd = ''; var taget_obj = $DE('commetcontentNew'); var waithtml = "
正在发送中...
"; if(f.msg.value=='') { alert("评论内容不能为空!"); return; } if(f.validate) { if(f.validate.value=='') { alert("请填写验证码!"); return; } else { nvalidate = f.validate.value; } } if(f.msg.value.length > 500) { alert("你的评论是不是太长了?请填写500字以内的评论。"); return; } if(f.feedbacktype) { for(var i=0; i < f.feedbacktype.length; i++) if(f.feedbacktype[i].checked) nfeedbacktype = f.feedbacktype[i].value; } if(f.face) { for(var j=0; j < f.face.length; j++) if(f.face[j].checked) nface = f.face[j].value; } if(f.notuser.checked) nnotuser = '1'; if(f.username) nusername = f.username.value; if(f.pwd) npwd = f.pwd.value; var myajax = new DedeAjax(taget_obj, false, true, '', '', waithtml); myajax.sendlang = 'utf-8'; myajax.AddKeyN('dopost', 'send'); myajax.AddKeyN('aid', '27'); myajax.AddKeyN('fid', f.fid.value); myajax.AddKeyN('face', nface); myajax.AddKeyN('feedbacktype', nfeedbacktype); myajax.AddKeyN('validate', nvalidate); myajax.AddKeyN('notuser', nnotuser); myajax.AddKeyN('username', nusername); myajax.AddKeyN('pwd', npwd); myajax.AddKeyN('msg', f.msg.value); myajax.SendPost2('/plus/feedback_ajax.php'); f.msg.value = ''; f.fid.value = 0; if(f.validate) { if($DE('validateimg')) $DE('validateimg').src = "/include/vdimgck.php?"+f.validate.value; f.validate.value = ''; } } function quoteCommet(fid) { document.feedback.fid.value = fid; } LoadCommets(1);
var _mda_place_id ="58bce8309bc21";
var contentRtPicAD2 = document.getElementById("contentRtPicAD2"); var stop = contentRtPicAD2.offsetTop - 60, docBody = document.documentElement || document.body.parentNode || document.body, hasOffset = window.pageYOffset !== undefined, scrollTop; window.onscroll = function (e) { // cross-browser compatible scrollTop. scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop; if (scrollTop >= stop) { contentRtPicAD2.className = 'stick'; } else { contentRtPicAD2.className = ''; } }