您好！欢迎来到源码码网！
网站首页 网站公告 帮助中心 工单管理
管理中心

源码码网

热门搜索：
免费发布需求
免费发布任务 建立自助交易 免费发布商品
全部商品分类
首页 服务中心 源码商城 服务市场 任务大厅 软件教程

HTML在如何在透明输入框里添加图标的代码实现过程

  • 软件教程
  • 来源：源码码网
  • 编辑：admin
  • 时间：2021-01-31 22:22
  • 阅读：954

文章主要介绍了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;

小伙伴们有没有get到，是不是很简单呢？关注源码码网，学习更多的开源代码。

特别声明：
1、如无特殊说明，内容均为本站原创发布，转载请注明出处；
2、部分转载文章已注明出处，转载目的为学习和交流，如有侵犯，请联系客服删除；
3、编辑非《源码码网》的文章均由用户编辑发布，不代表本站立场，如涉及侵犯，请联系删除；
全部评论(0)
推荐阅读
  • bootstrap ui框架能用在uniapp中吗？
  • bootstrap ui框架能用在uniapp中吗？
  • BootstrapUI框架通常是前端开发中的一种工具，它提供了一套预定义的CSS样式和组件，用于快速构建响应式布局的网页。然而，UniApp是一个使用Vue.js开发跨平台应用的框架，它可以用来开发iOS、Android、以及各种小程序和H5应用。
  • 互动社区
  • 来源：源码码网
  • 编辑：热度建站
  • 时间：2024-04-12 00:04
  • 阅读：135
  • css实现banner图由中心点动态放大效果
  • css实现banner图由中心点动态放大效果
  • 在日常的网页设计中，为了让网页增加一定的特效以达到交互的目的，我们尝尝会在网页中使用一些动画效果。今天来说说实现banner图由中心点动态放大效果，实现这个效果需要用到css中的动画：animation​和关键帧：@keyframes，具体示例如下：
  • 源码教程
  • 来源：源码码网
  • 编辑：源码码网
  • 时间：2024-04-11 18:52
  • 阅读：151
  • countUp.js实现鼠标滑动到某个位置数字自动滚动增加的效果
  • countUp.js实现鼠标滑动到某个位置数字自动滚动增加的效果
  • 在网页开发中为了提升网页的交互效果，经常会用到使用js给网页增加一定的特效，下边就来说说使用js实现鼠标滑动到某个位置数字自动滚动增加的效果。其实这种效果有很多中解决办法，自己也可以去写，下边我们借助countUp.js来实现，关于这个js文件，我放在末尾：
  • 源码教程
  • 来源：源码码网
  • 编辑：源码码网
  • 时间：2024-04-08 09:20
  • 阅读：227
  • 响应式网页设计思路及注意事项
  • 响应式网页设计思路及注意事项
  • 一、什么是响应式网页响应式网页设计就是让网页具有根据设备类型应用CSS样式的能力。设计：设想、计划。设计就是把想法实现。网页设计：按照一定的设计思路布局网页内容。传统网页设计：都是针对PC端浏览器而设计的，不具备查询设备的能力，更不能对多种访问设备做出响应。传统网页设计的弊端：在移动互联网时代，传统的网页设计不适合多屏幕时代。响应式网页设计应运而生。响应式网页设计是一种设计网页的思想/方法。响应：指让我们的网页能够自动查询用户的访问设备
  • 源码教程
  • 来源：源码码网
  • 编辑：源码码网
  • 时间：2024-04-02 11:24
  • 阅读：131
  • css中rel的属性值都有哪些，分别代表什么意思
  • css中rel的属性值都有哪些，分别代表什么意思
  • 在HTML中，元素的rel属性用于定义当前文档与被链接文档之间的关系。这个属性在CSS的上下文中经常与样式表关联，但rel属性的用途远不止于此。以下是一些常见的rel属性值及其意义：1、stylesheet：表示被链接的文档是一个样式表。这通常用于链接CSS文件。
  • 源码教程
  • 来源：源码码网
  • 编辑：源码码网
  • 时间：2024-03-28 12:28
  • 阅读：264
企业网站建设
联系客服
源码代售 源码咨询 素材咨询 联系客服
029-84538663
手机版

扫一扫进手机版
返回顶部