CSS3动画搜索框

时间: 2013-12-9 分类: CSS 作者: SAI

TAGS:

132247nlaecgaboosb551t
在这篇文章告诉你如何用CSS3创建各种颜色动画搜索框。你可以简单地将代码复制,并用它在您的Web项目。
#searchform { float:left; margin-left:20px; margin:9px 0px 0px; padding:0px; }
    #searchform fieldset { padding:0px; border:none; margin:0px; }
    #searchform input[type=”text”] {
        background:#e8e8e8;
        border:none;
        float:left;
        padding:0px 10px 0px 15px;
        margin:0px;
        width:150px;
        height:38px;
        line-height:38px;
        transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        -moz-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        -webkit-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        -o-transition:all 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        color:#585858;
    }
    #searchform input[type=”text”]:hover, #searchform input[type=”text”]:focus { width:200px; }
    #searchform input[type=”submit”] { background:url(icon-search.png) center 11px no-repeat; cursor:pointer; margin:0px; padding:0px; width:37px; height:38px; line-height:38px; }
 
    input[type=”submit”] { padding:4px 17px; color:#ffffcolor:#585858; ff; text-transform:uppercase; border:none; font-size:20px; background:url(gradient.png) bottom repeat-x; cursor:pointer; margin-top:10px; float:left; overflow:visible; transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; }
 
    #searchform input[type=”submit”]:hover { background-color:#333232; }
        #searchform input[type=’submit’] { background-color:#25ade4; }
 
<form method=”get” id=”searchform” action=”http://w3lessons.info”>
    <fieldset>
    <input id=”s” name=”s” type=”text”
            value=”Enter Keyword”
            onblur=”if(this.value==”){this.value=’Enter Keyword';}”
            onfocus=”if(this.value ==’Enter Keyword’) {this.value=”; }” />
    <input name=”submit” type=”submit”  value=”” />
    </fieldset>
</form>
Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » CSS » CSS3动画搜索框
本文地址:http://www.saiody.com/?p=926

返回顶部