爱IT论坛

原墨客安全网
 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 44|回复: 1

[html例程分享] 在透明输入框里添加图标

[复制链接]
Hing 中级会员
发表于2020-5-5 19:41 查看: 44 回复: 1 | 显示全部楼层 |阅读模式
2020327163739328.jpg


基本思路

其实就把输入框与后面的图标一起放在一个div里面,然后将输入框的border设置为0px,最后设置div的border为最终的外边框

我们最直接上代码:

HTML:

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="请输入查找的律师或专长">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>


CSS:

这里是设置外面整个div的样式
.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}


这里是设置里面的输入框的长宽、boder为0px、里面的字体大小、点击不会亮边框(outline:none)
设置透明度这里使用rgba(),最后一个属性就是透明度(在0-1之间 )
input {
    width: 200px;
    height: 35px;
    border: 0;
    font-size: 14px;
    outline: none;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    font-size: 16px;
    margin: 0 10px;

回复

使用道具 举报

Ryan袁奥 初级会员
发表于2020-5-9 12:10 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 收藏帖子 返回列表 您可能遇到的问题? 联系我们 APP下载

小黑屋|联系我们|版块索引|网站地图|猜你喜欢|标签|友链交换
版权所有: 爱IT论坛 - 渝ICP备: (18008162号) 渝公网安备: (50023502000314号) - Powered by Discuz!
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表爱IT论坛的立场!
若本站内容无意中侵犯了您的知识产权,请来信,我们将尽快核实 并采用相应的方式给予处理。
本站会员须知: 本站发布信息和工具均来自互联网,仅提供学习参考,严禁非法使用!
Copyright© 2013-2020 2iTa.com All Right Reserved