货通天下 - AA废旧物质回收网!

郑州废品回收网|郑州废品回收|河南废品回收|郑州废旧物质回收|河南工厂矿积压物质回收|河南AA废品回收交易网

当前位置: 主页 > 网络营销SEO推广 >

利用CSS来设计你的搜索框

时间:2014-02-10 08:12来源:未知 作者:admin 点击:
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

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)
最新分类信息更多...
------分隔线----------------------------
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
栏目列表