这篇文章主要介绍了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在输入框里添加图标的实现代码的文章就介绍到这了,更多相关html 输入框图标内容请搜索爱安网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持爱安网!

最新资讯
时隔3天北京朝阳再公示众金所等十家网贷无实际办公地

时隔3天北京朝阳再公

北京朝阳区在一周左右的时间内对“众金所”“春雨金服
当年轻人去盲盒店的时候,他们在想什么

当年轻人去盲盒店的时

盲盒,本质上既是“惊喜经济”,同时也是“冲动消费”。
证券时报刊评:户口奖励与李佳琦核心价值匹配不足

证券时报刊评:户口奖励

特殊人才一定有特殊价值。
今年每部智能机平均配3.5个镜头 多摄镜头组件出货将达50亿

今年每部智能机平均配

2020第一季度交付的每部智能手机平均配备了3.5个以上
欧盟针对科技巨头制定新的税收和内容规则

欧盟针对科技巨头制定

欧盟数字政策和反垄断主管玛格丽特-维斯塔格(Margrethe
三星电子第二季度营业利润超过预估

三星电子第二季度营业

三星电子第二季度营业利润8.1万亿韩元,市场预估6.21万
最新文章
HTML中利用div+CSS实现简单的箭头图标的代码

HTML中利用div+CSS实

这篇文章主要介绍了HTML中利用div+CSS实现简单的箭头
HTMl页面中返回顶部的几种实现小结

HTMl页面中返回顶部的

这篇文章主要介绍了HTMl页面中返回顶部的几种实现小结
解决vscode 中保存后html自动格式化的问题

解决vscode 中保存后h

这篇文章主要介绍了vscode 中保存后html自动格式化的
html浮动提示框功能的实现代码

html浮动提示框功能的

这篇文章主要介绍了html浮动提示框功能的实现代码,需
详解HTML中的图片标签的用法

详解HTML中的图片标签

这篇文章主要介绍了详解HTML中的图片标签的用法,本文
使用html-webpack-plugin'入再内存中生成 html 页面插件

使用html-webpack-plu

这篇文章主要介绍了使用html-webpack-plugin'入再内