HTML在透明输入框里添加图标的实现代�

Admin 2022-06-17 群英技术资� 323 次浏�

这篇文章主要介绍“HTML在透明输入框里添加图标的实现代码”,有一些人在HTML在透明输入框里添加图标的实现代码的问题上存在疑惑,接下来小编就给大家来介绍一下相关的内容,希望对大家解答有帮助,有这个方面学习需要的朋友就继续往下看吧�


最近在写一个律师推荐前台的网站,在上面搜索框这里出现了问题,我想把搜索的图标放在搜索框里面,但是弄了半天都不大如意…�

话不多说,我们直接进入主� �

基本思路

其实就把输入框与后面的图标一起放在一个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;

总结


以上就是关于“HTML在透明输入框里添加图标的实现代码”的介绍了,感谢各位的阅读,希望这篇文章能帮助大家解决问题。如果想要了解更多知识,欢迎关注群英网络,小编每天都会为大家更新不同的知识� 群英智防CDN,智能加速解决方案
标签� 输入框图�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服