两种方法 |
您所在的位置:网站首页 › html中文本框里加入图标 › 两种方法 |
假如只有一个输入的搜索条件,你还在用一个单独的“搜索”按钮(button)标签吗?那种设计现在使用的不多了,现在更多的是把搜索图标放在输入框内,这是一个时尚的UI设计方式。本文将通过3个实例,介绍如何在input输入框里放一个搜索小图标。 完整HTML代码 输入框小图标 .box01{ color: #434343; position: relative; margin: 20px 20px; } .box01 input{ -webkit-appearance: none; -moz-appearance: none; appearance:none ; outline: 0; width: 270px; height: 30px; border:0px solid #fff; border-radius: 20px; box-shadow:0 0 5px 2px rgba(0,0,0,0.1); padding: 0 30px 0 15px; } .box01 label{ font-size: 16px; z-index: 2; position: absolute; left: 109px; top:15%; color: #b2b2b2; } .icon{ display: inline-block; height: 16px; width: 16px; background-image: url(search.png); background-repeat: no-repeat; position: absolute; top: 24%; left: 290px; z-index: 2; } #tip02{ padding: 0 10px 0 35px; background-image: url(search.png); background-repeat: no-repeat; background-position: 10px 7px; } #tip03{ width: 290px; padding: 0 10px 0 15px; background-image: url(search.png); background-repeat: no-repeat; background-position: 290px 7px; }demodownload 代码解释 第一种方法是使用标签,设置它对容器的相对位置:position,top,lef。 第二和第三种方法是把小图标当作input标签的背景图片,设置背景图片的位置:background-position。 本实例代码并不复杂,关键是弄明白CSS里的background-image(背景图片)属性,以及position、background-position等位置数字的含义。 本实例需要用到一个搜索小图片search.png,你也可以用base64字符串来代替。 您可能对以下文章也感兴趣 4个实例演示——美化表单input输入框CSS样式 CSS表单输入框设计:点击放大输入框 jQuery和CSS3实现有进度条的多步注册表单 纯CSS:点击输入框时,标签(占位符)浮动可见 纯css3实现漂亮的用户注册表单 CSS3+jQuery实现登录表单与注册表单同页平滑切换 漂亮的注册和登录切换表单【html5和css3实现】 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |