• [织梦吧]仅有域名:www.tbea-hb.com,织梦DedeCMS学习渠道.

当时方位: > 网页制造 > DIV&CSS >

用CSS规划你的查找框

来历: www.tbea-hb.com 修正:织梦吧 时刻:2018-09-19点击:

今日我将介绍一下怎么运用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的独立布景图片,并且这个图篇有必要是右对齐的。***/
}

 

 

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流渠道
  • 仅有网址 www.tbea-hb.com 网站地图
  • 联络咱们 1978130638@qq.com ,