Question

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

这是我的代码：

.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>

Answer 1

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

＆＃13;

.new-chat-window {
  position: relative;
  width: 200px;
  display: block;
  margin: 10px auto;
  text-align: center;
  z-index: 2;
}

.new-chat-window .fa {
  position: absolute;
  top: 7px;
  left: 10px;
  font-weight: bold;
  font-style: normal;
}

input:focus {
  outline-color: $blue;
}

.new-chat-window-input {
  border: 1px solid #ccc;
  line-height: 30px;
  padding-left: 30px;
  width: 100%;
  z-index: 1;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用background属性完成此操作：

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

＆＃13;

.display-new-chat-window .new-chat-window {
  display: block;
  text-align: center;
  z-index: 2;
}

.display-new-chat-window .new-chat-window input:focus {
  outline-color: $blue;
}

.display-new-chat-window .new-chat-window-input {
  border: 1px solid #ccc;
  line-height: 30px;
  margin-top: 10px;
  padding-left: 15px;
  width: 200px;
  z-index: 1;
  background: url(https://unsplash.it/15) no-repeat scroll 0 center;
}

＆＃13;

<div class="display-new-chat-window">
  <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>
</div>

＆＃13;

Answer 3

对不起如果我误解了你的问题

在这个例子中，我使用自己的代码

HTML

<input type="text" class="input-logo" placeholder="Paypal id/email">

CSS

 .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;
  }

对于您的代码，您添加了我的input-logo类，您可以从那里设置样式。

看看： https://codepen.io/ronalto7777/pen/rzPjoR

在输入中插入徽标

3 个答案: