精美的HTML5/CSS3表单带小图标

今天我们要来分享一款非常精美的HTML5/CSS3表单，准备地说，这是一款经过美化的input输入表单，每一个输入表单都可以定义其两侧的小图标，非常华丽。另外，这款表单应用还采用了3种不同的风格主题，你可以在演示页的菜单栏中选择一种样式。需要高版本的浏览器才能支持。

你也可以在这里在线演示

下面我们来简单分析一下这款表单的源代码，源代码由HTML代码、CSS代码及Javascript代码组成。一共3组样式，我们只对其中一组作解说。

HTML代码：

<ul data-for="prefix">

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

      <li> <input type="text" placeholder="Type here..." /> </li>

    </ul>

很简单，用一组input实现基本的输入表单。这里利用了HTML5的placeholder属性实现输入框空白时默认的提示文字。

接下来是CSS代码，将渲染这些输入表单的样式。

CSS代码：

.postfix {

      vertical-align: top;

      display: inline-block;

      width: 20px;

      height: 20px;

      padding: 8px 10px;

      background: #f2f2f2;

      border: 1px solid #cccdcf;

      border-left:;

      border-top-right-radius: 2px;

      border-bottom-right-radius: 2px;

      -moz-border-radius-topright: 2px;

      -moz-border-radius-bottomright: 2px;

      -webkit-border-top-right-radius: 2px;

      -webkit-border-bottom-right-radius: 2px;

    }

  .prefix,

  .postfix {

    font-family: FontAwesome;

    line-height: 1.5em;

    font-size: 16px;

    color: #737373;

  }

其中表单前面的小图标是这样实现的：

.prefix.orange,

  .postfix.orange {

    background: #ffb700;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjhjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

    background: -moz-linear-gradient(top,  #ffb700 0%, #ff8c00 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb700), color-stop(100%,#ff8c00));

    background: -webkit-linear-gradient(top,  #ffb700 0%,#ff8c00 100%);

    background: -o-linear-gradient(top,  #ffb700 0%,#ff8c00 100%);

    background: -ms-linear-gradient(top,  #ffb700 0%,#ff8c00 100%);

    background: linear-gradient(to bottom,  #ffb700 0%,#ff8c00 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );

    border: 1px solid #e59500;

    color: #fff;

  }

data:image是CSS3专有的属性，可以用编码的二进制流来生成图片。

Javascript代码：

$(document).ready(function() {

    /* Force placeholder support */

    if(!Modernizr.input.placeholder){

      $("input").each( function(){

        thisPlaceholder = $(this).attr("placeholder");

        if(thisPlaceholder!=""){

         $(this).val(thisPlaceholder);

         $(this).focus(function(){ if($(this).val() == thisPlaceholder) $(this).val(""); });

         $(this).blur(function(){ if($(this).val()=="") $(this).val(thisPlaceholder); });

       }

     });

    }

   /* Prefix  */

    $('.ppfix.pre').each(function() {

      var className, preElem;

      className  = $(this).attr('class').replace('pre', '').replace('ppfix', '').trim();

      preElem    = '<span>  </span>';

      $(this).before(preElem);

    });

    /* Postfix */

    $('.ppfix.post').each(function() {

      var className, preElem;

      className  = $(this).attr('class').replace('post', '').replace('ppfix', '').trim();

      preElem    = '<span>  </span>';

      $(this).after(preElem);

    });

});

以上代码只是一些最核心的代码，全部代码大家可以下载源码来研究。源码下载>>

巴特西

精美的HTML5/CSS3表单带小图标

HTML代码：

CSS代码：

Javascript代码：

最新文章

热门文章

巴特西

精美的HTML5/CSS3表单 带小图标

HTML代码：

CSS代码：

Javascript代码：

最新文章

热门文章

精美的HTML5/CSS3表单带小图标