简单制作网站搜索框

2021-07-28 0 4,951

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

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

收藏 (0) 打赏

您的支持是我们前进最大的动力!

打开微信扫一扫,即可进行扫码打赏哦
点赞 (0)

本站声明: 根据2013年1月30日《计算机软件保护条例》2次修订第17条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬,鉴于此,也希望大家遵守相关法律法规使用、研究软件。 1、本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解。 2、下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。 3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。 4、本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用,如有链接无法下载、失效或广告,请联系客服处理。 5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所 以不支持任何理由的退款兑现,请熟知后再下载。

彤彤模板团 织梦CMS教程 简单制作网站搜索框 https://www.xiaoyuerqingfen.cn/3672.html

一家有态度的精品资源分享平台

常见问题
  • 模板团承诺演示效果图均和网站95%一样,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 因为模板具有可复制性和可传播性,模板一旦发货,非质量问题,不支持退换;所以务必请您一定看清楚后再购买。
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    资源总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

开通会员,尊享海量资源下载特权