注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

自适应宽度的搜索框设计  

2014-06-11 15:29:05|  分类: 实例 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
现在流行的响应式布局中经常需要用到自适应宽度的设计,像搜索框这样稍复杂的东西经常都会使用borderpadding之类的属性,在content-box的模式下无法使用width:100%就很难做到自适应。现在我们使用border-box来实现这个设计。
运行<!DOCTYPE html>
<style>
.search {
  box-sizing
:border-box;
  -moz-box-sizing
:border-box;
  position
:relative;
  overflow
:hidden;
  width
:100%;
  padding-right
:30px;
  border
:2px solid #999;
  height
:32px;
}
.search form {height:100%;}
.search input[type='text'] {
  box-sizing
:border-box;
  -moz-box-sizing
:border-box;
  width
:100%;height:100%;
  padding
:8px;
  border
:0px;
  font
:14px/14px Simsun;
  outline
:none;
}
.search input[type='submit'] {
  position
:absolute;
  right
:0px;top:0px;
  height
:28px;width:30px;
  border
:0px;
  border-left
:2px solid #999;
  background
:#999;
  font
:bold 14px/Simsun;
  text-align
:center;
  text-decoration
:none;
  color
:#FFF;
  outline
:none;
}
</style>
<body>
<div class="search">
  <form>
    <input type="text" name="keywords" />
    <input type="submit" value="" />
  </form>
</div>
</body>
自适应宽度的搜索框设计 - sssxiaoliya - 左岸
  评论这张
 
阅读(29)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017