简单制作网站搜索框

随着互联网的快速发展,如今网站用户的需要也随之提高,这对于织梦模板设计又是一次创新。

搜索框大概是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文本能给大家提供方便!

版权免责声明

① 本站VIP源码资源永久免费下载 www.wayu.cn
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,或者点击 投稿
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

评论0

请先

源码安装后,如有要求加QQ获取帮助的,请放弃使用,小心被骗。

没有账号? 忘记密码?