<kbd id='13059'></kbd><address id='9452f'><style id='2742e'></style></address><button id='88fff'></button>

          简单制作网站搜索框

          设计理论 浏览

          小编:随着互联网的快速发展,如今网站用户的需要也随之提高,这对于织梦模板设计又是一次创新。 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它。无论

          随着互联网的快速发展,如今网站用户的需要也随之提高,这对于织梦模板设计又是一次创新。
          搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它。无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框?

          在今天的文章中,大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。当然在开始介绍前你也可以下载源代码或者查看在线演示。

          HTML举例:

          正如接下来你所看到的,标记很少,并且很容易理解:

          <form class=“cf form-wrapper”>

          <input type=“text” placeholder=“Search here.。.” required>

          <button type=“submit”>Search</button>

          </form>

          你可能注意到了HTML5的特殊属性,像placeholder和required,简介如下:

          .placeholder-基本上,这个属性的作用在于当文本框获得焦点之前,先在文本框里显示一个域的信息,直到获得焦点后,域的信息被隐藏。

          .required-这个属性说明了当前元素是表单提交中的一个必需属性。

          HTML5也给我们带来了一个新的type属性:type="search"。

          小贴士:HTML 元素像img 和input 都没有内容,所以,像before这样的伪元素不会为我们的搜索框呈现任何箭头。我的解决方案是使用button type=“submit” 元素代替普通的input type=“submit”。这样,我们就可以用ENTER键来提交表单。

          CSS举例

          接下来,你将会看到demo里必要的样式:

          清除浮动

          .cf:before, .cf:after{

          content:“”;

          display:table;

          }

          .cf:after{

          clear:both;

          }

          .cf{

          zoom:1;

          }

          表单元素

          有前缀的属性像-moz、-box、-shadow 不包括在内,我只想让下面的代码保持干净。

          /* Form wrapper styling */

          .form-wrapper {

          width: 450px;

          padding: 15px;

          margin: 150px auto 50px auto;

          background: #444;

          background: rgba(0,0,0,.2);

          border-radius: 10px;

          box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);

          }

          /* Form text input */

          .form-wrapper input {

          width: 330px;

          height: 20px;

          padding: 10px 5px;

          float: left;

          font: bold 15px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;

          border: 0;

          background: #eee;

          border-radius: 3px 0 0 3px;

          }

          .form-wrapper input:focus {

          outline: 0;

          background: #fff;

          box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

          }

          .form-wrapper input::-webkit-input-placeholder {

          color: #999;

          font-weight: normal;

          font-style: italic;

          }

          .form-wrapper input:-moz-placeholder {

          color: #999;

          font-weight: normal;

          font-style: italic;

          }

          .form-wrapper input:-ms-input-placeholder {

          color: #999;

          font-weight: normal;

          font-style: italic;

          }

          /* Form submit button */

          .form-wrapper button {

          overflow: visible;

          position: relative;

          float: right;

          border: 0;

          padding: 0;

          cursor: pointer;

          height: 40px;

          width: 110px;

          font: bold 15px/40px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;

          color: #fff;

          text-transform: uppercase;

          background: #d83c3c;

          border-radius: 0 3px 3px 0;

          text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);

          }

          .form-wrapper button:hover{

          background: #e54040;

          }

          .form-wrapper button:active,

          .form-wrapper button:focus{

          background: #c42f2f;

          outline: 0;

          }

          .form-wrapper button:before { /* left arrow */

          content: ‘’;

          position: absolute;

          border-width: 8px 8px 8px 0;

          border-style: solid solid solid none;

          border-color: transparent #d83c3c transparent;

          top: 12px;

          left: -6px;

          }

          .form-wrapper button:hover:before{

          border-right-color: #e54040;

          }

          .form-wrapper button:focus:before,

          .form-wrapper button:active:before{

          border-right-color: #c42f2f;

          }

          .form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */

          border: 0;

          padding: 0;

          }
          希望这个搜索框与HTML文本能给大家提供方便!

           

          当前网址:http://www.021cup.com/experience/theory/2015/1007/48.html

           
          你可能喜欢的: