Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

自适应宽度的搜索框设计

  现在流行的响应式布局中经常需要用到自适应宽度的设计,像搜索框这样稍复杂的东西经常都会使用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/1 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>
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^