今天我将介绍一下如何使用CSS中的背景图片来设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框,但是这种方法看起来会更容易些,所以我想将它与感兴趣的朋友分享。
原始方式
首先来让我们看看我的原始的使用<input type=”image” src=”image_url” />的方法:
<form method="get" id="searchform" action="http://www.sohtanaka.com/">
<fieldset>
<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" />
</fieldset>
</form>
这看起来挺不错的,但是它有一个不好的地方,这个图片按钮不会和搜索框对其,我必须使用一个负的margin-top属性来修正这个bug。
改良方法
在这个改良版的方法中,我决定不再使用 type=”image” ,而是使用<button>标签,然后用CSS添加背景。这允许文本输入框和按钮自动对齐。我同样添加了a :focus伪类
到最终效果(IE将不会支持这个,所以我添加了一个特殊的样式针对IE来隐藏这个效果)。 下面是这种方法的一些好处:
- 很自然的对齐
- 对按钮和输入框只使用了一张图片
- :focus 伪类支持它的浏览器
- 添加hover 效果到按钮
HTML
<form method="get" id="searchform" action="http://www.sohtanaka.com/">
<fieldset class="search">
<input type="text" class="box" />
<button class="btn" title="Submit Search">Search</button>
</fieldset>
</form>
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特别注释
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
IE 样式- ie.css
朋友评论说如果输入文字过多IE6和IE7会水平滚动背景图片,所以我的方法是专门为IE使用一个单独的背景图片 ,而且不是让它左对齐,我翻转了它,通过让背景图片右对齐来修正这个。
.search input.box {
background: url(search_bg_ie.gif) no-repeat right bottom;
/* 专门为IE的独立背景图片,而且这个图篇必须是右对齐的。***/
}
关于<button>标签的使用,在IE和FF下测试效果都不一样,个人解决设置type="submit"属性
分享到:
相关推荐
此程序使用方便简单、易用灵活 且不限Asp、php、net 更新说明: 1.支持xhtml 2.兼容IE6,IE7,FF 3.支持input显示与value分离【以隐藏域方式提交数据】 4.支持下拉框按钮 5.支持显示结果数量 6.可以一个页面多次使用 ...
软件介绍 此小程序是模仿Google(sgguest)输入提示框所编写 ... 此程序使用方便简单、易用灵活 且不限Asp、php、net ...15.解决了无法获取用户填写默认值的问题 16.当输入框失去焦点时,提示框会自动隐藏
对设置样式时怎么区分input是按钮还是文本框问题的技术调查——把input里面的东西剔出来
Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢: 一杯白开水 网友 的帮助 版本所提的修改建议 *********************************...
4.1 用CSS设计网站导航 4.1.1 横向导航 4.1.2 纵向导航 4.1.3 下拉及多级弹出式菜单 4.1.4 门户网站的导航设计(闪客帝国) 4.2 背景控制 4.2.1 背景颜色 4.2.2 背景图片 4.2.3 背景定位 4.2.4 背景滚动 4.2.5 背景...
######V1.7解决问题############ 14.可以自己设置提示框的长度 15.解决了无法获取用户填写默认值的问题 16.当输入框失去焦点时,提示框会自动隐藏 ######V1.8解决问题############ 17.解决了鼠标无法选择的问题 ****...
此程序是模仿Google(sgguest)输入提示框所编写 ...此程序使用方便简单、易用灵活 且不限Asp、php、net ...12.解决了在有滚动条时,ie6下被表单遮挡的问题 13.支持回调函数。当该插件执行完毕时,执行另外一个指定函数
KindEditor是在国内比较受欢迎的HTML在线编辑器,本次更新新增单元格编辑功能,各种按钮(确定、取消、上传...BUG: 修改了在IE上使用清除格式功能来删除一段加粗的文字时发生JS错误的问题。(只有压缩后的min有这个问题)
一个是file上传控件在火狐下无法通过css改变width,另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是file上传控件在IE10,firefox16,chrome22,opera12,safari5.1.7里的截图: 在IE10里,双击...
Demo:修复输入框和文本域允许文本选择的问题,并新增casperjs测试; 修复AMD包装器依赖缺失问题; 修复了需经triggerWithDeprecated来确保前页面事件均拥有PageContainer副本的事件,并确保所有PageContainer事件都...
之前写了一个登录表单页面,再iphone上测试遇到了一些奇怪的问题:表单中的input[type="submit"]按钮在iPhone的safari浏览器下会出现圆角的情况;input[type="text"]文本输入框会有内阴影,这些问题该怎么处理呢?请...
问题 在一个网站中可能我的输入框式下面这样的: 设计者可能想让上传部分也像...读者Michael McGrady发明了一个不错的小技巧来解决给上传按钮添加样式的问题。这个页面上的所有解决办法都是他发明的,我只是添加了posi
按照之前的汉化和解决方法,已经不能完美解决问题!比如使用新版本打开一个文本文件,当“另存为”、并在文件名输入框里点鼠标右键时,右键菜单为英文。好多网友反反馈认为没有汉化完整,其实这和汉化完全无关,该...
按照之前的汉化和解决方法,已经不能完美解决问题!比如使用新版本打开一个文本文件,当“另存为”、并在文件名输入框里点鼠标右键时,右键菜单为英文。好多网友反反馈认为没有汉化完整,其实这和汉化完全无关,该...
按照之前的汉化和解决方法,已经不能完美解决问题!比如使用新版本打开一个文本文件,当“另存为”、并在文件名输入框里点鼠标右键时,右键菜单为英文。好多网友反反馈认为没有汉化完整,其实这和汉化完全无关,该...
按照之前的汉化和解决方法,已经不能完美解决问题!比如使用新版本打开一个文本文件,当“另存为”、并在文件名输入框里点鼠标右键时,右键菜单为英文。好多网友反反馈认为没有汉化完整,其实这和汉化完全无关,该...
’常规’ 的 ‘使用 TR1 正则表达式’ 选项显示位置不正确的问题 [1014] 修正: FTP 设置对话框布局的问题 [0907] 修正: 不能定义颜色的问题 [0828] 更新: 许可协议汉化 [0612] 修正: “文档”菜单中的“文件多...
问题: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <link rel=stylesheet href=../../layuiadmin/layui/css/layui.css rel=...
第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 ...
第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 ...