Html 在输入中插入徽标

我正在努力创建一个研究领域。我想在输入栏中添加一个徽标

这是我的密码：

.display-new-chat-window {
  .new-chat-window {
    display: block;
    text-align: center;
    z-index: 2;
    input:focus {
      outline-color: $blue;
    }
    .new-chat-window-input {
      border: 1px solid #ccc;
      line-height: 30px;
      margin-top: 10px;
      padding-left: 15px;
      width: 200px;
      z-index: 1;
    }
  }
}


<div class="new-chat-window">
  <i class="fa fa-search"></i>
  <input type="text" class="new-chat-window-input" id="new-chat-window-input" placeholder="Rechercher" />
</div>

。显示新的聊天窗口{
.新建聊天窗口{
显示：块；
文本对齐：居中；
z指数：2；
输入：焦点{
轮廓颜色：$蓝色；
}
.新的聊天窗口输入{
边框：1px实心#ccc；
线高：30px；
边缘顶部：10px；
左侧填充：15px；
宽度：200px；
z指数：1；
}
}
}

您可以使用

background

属性完成此操作：

input {
  background: url(https://path.to/image);
}

。显示新聊天窗口。新聊天窗口{
显示：块；
文本对齐：居中；
z指数：2；
}
.显示新的聊天窗口。新的聊天窗口输入：焦点{
轮廓颜色：$蓝色；
}
.显示新的聊天窗口。新的聊天窗口输入{
边框：1px实心#ccc；
线高：30px；
边缘顶部：10px；
左侧填充：15px；
宽度：200px；
z指数：1；
背景：url(https://unsplash.it/15)无重复滚动0中心；
}

---

您可以使用

background

属性完成此操作：

input {
  background: url(https://path.to/image);
}

。显示新聊天窗口。新聊天窗口{
显示：块；
文本对齐：居中；
z指数：2；
}
.显示新的聊天窗口。新的聊天窗口输入：焦点{
轮廓颜色：$蓝色；
}
.显示新的聊天窗口。新的聊天窗口输入{
边框：1px实心#ccc；
线高：30px；
边缘顶部：10px；
左侧填充：15px；
宽度：200px；
z指数：1；
背景：url(https://unsplash.it/15)无重复滚动0中心；
}

---

可能是这样的，其中L是徽标：

。新建聊天窗口{
位置：相对位置；
宽度：200px；
显示：块；
利润率：10px自动；
文本对齐：居中；
z指数：2；
}
.新建聊天窗口.fa{
位置：绝对位置；
顶部：7px；
左：10px；
字体大小：粗体；
字体风格：普通；
}
输入：焦点{
轮廓颜色：$蓝色；
}
.新的聊天窗口输入{
边框：1px实心#ccc；
线高：30px；
左侧填充：30px；
宽度：100%；
z指数：1；
}

L

可能是这样的，其中L是徽标：

。新建聊天窗口{
位置：相对位置；
宽度：200px；
显示：块；
利润率：10px自动；
文本对齐：居中；
z指数：2；
}
.新建聊天窗口.fa{
位置：绝对位置；
顶部：7px；
左：10px；
字体大小：粗体；
字体风格：普通；
}
输入：焦点{
轮廓颜色：$蓝色；
}
.新的聊天窗口输入{
边框：1px实心#ccc；
线高：30px；
左侧填充：30px；
宽度：100%；
z指数：1；
}

L

如果我误解了你的问题，很抱歉

在本例中，我使用自己的代码

html

对于您的代码，您可以添加my input logo类，并从中设置样式

看看：

---

如果我误解了你的问题，很抱歉

在本例中，我使用自己的代码

html

对于您的代码，您可以添加my input logo类，并从中设置样式

看看：

---

您的意思是在文本框的角落添加日志。对吗？首先，您的sass代码是否正在编译为css？或者你是想像在.css文件中那样使用这些样式吗？@LibinCJacob是的，没错。在我房间的左角input@FabioG不，这是一个.scss文件。您的意思是在文本框的角落添加日志。对吗？首先，您的sass代码是否正在编译为css？或者你是想像在.css文件中那样使用这些样式吗？@LibinCJacob是的，没错。在我房间的左角input@FabioG不，这是一个.scss文件

 .input-logo{  
        background-image:url(https://fx-
          rate.net/images/favi_transfer/paypal.com.png); 
        background-position:right;   
        background-repeat:no-repeat;   
        padding-left:1px;
        font-size: 16px;
        width: 200px;
  }