css实现在input框中放置小图标的例子_css input 图标_SELECT_BIN的博客-程序员秘密

技术标签： js

效果：

在输入框内加入小图标，主要有两种方法

一、使用标签<i>存放图标，利用绝对定位调整位置，图标图层需要在input之上

二、在input内直接使用背景图片放在图标，利用background-position调整位置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框小图标</title>
    <style type="text/css">
     .box01{
        color: #434343;
        position: relative;
        margin-bottom: 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;
     }
     /*利用<i>来安放图标*/
     .icon{
         display: inline-block;
         height: 16px;
         width: 16px;
         background-image: url(search.svg);/*这里放置图标的绝对路径*/
         background-repeat: no-repeat;
         position: absolute;
         top: 24%;
         left: 290px;
         z-index: 2;
     }
     /*利用背景图片安放图标*/
     #tip02{
         padding: 0 10px 0 35px;
         background-image: url(search.svg);
         background-repeat: no-repeat;
         background-position: 10px 7px;
     }
     
    </style>
</head>
<body>
    <div class="box01">
        <input type="text" id="tip" placeholder="搜索你喜欢的">
        <i class="icon"></i>
    </div>
    
    <div class="box01"><input type="text" id="tip02" placeholder="fine your need"></div>

</body>
</html>

本文链接：https://blog.csdn.net/SELECT_BIN/article/details/100165755

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

2019年11月全国程序员工资统计，区块链工程师比算法工资高。_织网者Eric的博客-程序员秘密

我每个月第一天（也许是第二天，第三天），会爬招聘网站，并在CSDN发布。趋势本月全国程序员平均工资为13451元，比上个月略涨。北上广深杭工资趋势区块链程序员的工资职能工资系统架构师23031区块链工程师20701算法工程师19645Python工程师17882Java工程师14080区块链工程师的工资比算法工程师要高哇，后悔...

html如何增加三级菜单,纯css 三级菜单_bosstha的博客-程序员秘密

/*添加视觉样式*/.multi_drop_menu {font:1em helvetica,arial,sans-serif;}.multi_drop_menu a {display:block;color:#555;background-color:#eee;padding:0.2em 1em;border-width:3px;border-color:transparent;}.multi_...

VirtualBox使用教程图解_dgh5757的博客-程序员秘密

VirtualBox使用教程图解。虚拟机软件在这里我向大家推荐VirtualBox。为什么推荐他呢？原因有三：1.体积小巧，相对于VMWare动辄几百M的安装包来说VirtualBox几十M的体积真算小巧了；2.免费，这点好处不用说，至少不需要到网上到处找破解版甚至于下载到有毒的版本。3.功能够用，备份，共享，虚拟化技术支持一个都不少，同时配置简单，有简体中文版本。好了，废话...

centos 7 安装dokuwiki_chanqidi9181的博客-程序员秘密

一.配置网络ipvim /etc/sysconfig/network-scripts/ifcfg-ens33重启网络service network restartifconfig查看ip地址ping百度（ping www.baidu.com）二.安装Apache1.yum安装Apache2.4yum install -y httpd安装完成，检查下apache服务状态，刚安装完是关闭的，需...

linux字符点阵,ASCII 字符的点阵显示_testerTechnology的博客-程序员秘密

来源：百问网作者：韦东山本文字数：2108，阅读时长：4分钟要在 LCD 中显示一个 ASCII 字符，即英文字母这些字符，首先是要找到字符对应的点阵。在 linux 内核源码中有这个文件：libfontsfont_8x16.c，里面以数组形式保存各个字符的点阵，比如：上图左侧有 16 行数值，每行 1 个字节。每一个节对应右侧一行中 8 个像素：像素从右边数起，bit0 对应第 0 个像素，bi...

chorme浏览器的Access-Control-Allow-Origin拦截限制_追梦的小猴子的博客-程序员秘密

今天在公司调试一个项目，这个项目的前后端是分离开的，也就是说前后端是在两个站点上的。我负责的前端页面在请求后端数据的时候数据可以拿到，但是chrome安全级别高，自动拦截跨域和站点的数据请求及交互，出现如下图所以的问题：　　在网上查找了很多资料，只知道原因是chrome浏览器安全拦截，但始终没有找到解决办法，最后询问了公司的大牛，给出指导，终于解决的这个问题，现将解决思路梳理一下，以备大家遇到类似...