表单/表格

多种纯CSS3搜索框UI设计效果

也想出现在这里?联系我们
创客主机

多种纯CSS3搜索框UI设计效果-创客云
这是一款使用 CSS3 制作的搜索框 UI 设计效果。这些搜索框在设计上代码简洁,设计风格以扁平风格为主,效果时尚大方。

HTML 结构

所有的搜索框的 HTML 结构都是在一个 form 表单中放置一个 input 和一个提交按钮。

  1. <form>
  2.   <input type="text" placeholder="搜索从这里开始...">
  3.   <button type="submit"></button>
  4. </form>

多种纯CSS3搜索框UI设计效果-创客云

CSS 样式

各种搜索框的 CSS 代码非常简单,例如第一种效果的搜索框,通过简单的定位即可完成。

  1. .d1 {background: #A3D0C3;}
  2. .d1 input {
  3.   width: 100%;
  4.   height: 42px;
  5.   padding-left: 10px;
  6.   border: 2px solid #7BA7AB;
  7.   border-radius: 5px;
  8.   outline: none;
  9.   background: #F9F0DA;
  10.   color: #9E9C9C;
  11. }
  12. .d1 button {
  13.   position: absolute; 
  14.   top: 0;
  15.   right: 0px;
  16.   width: 42px;
  17.   height: 42px;
  18.   border: none;
  19.   background: #7BA7AB;
  20.   border-radius: 0 5px 5px 0;
  21.   cursor: pointer;
  22. }
  23. .d1 button:before {
  24.   content: "\f002";
  25.   font-family: FontAwesome;
  26.   font-size: 16px;
  27.   color: #F9F0DA;
  28. }

其它各种效果的搜索框的实现代码请参考下载文件。

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!