Question

我想将svg图像放入这样的引导表单输入中：

这是html面：

<div class="col-md-6">
  <div class="subscribe-wrapper subscribe2-wrapper mb-15">
    <div class="input-group">
      <img src="../../../assets/images/Combined Shape.svg" alt="">
      <input type="email" class="form-control email-input" placeholder="Votre email">

      <span class="input-group-btn">
       <button class="btn subscribe-btn type="submit">Souscrire</button>
      </span>
   </div>
 </div>
</div>

无礼

.email-input
  height: 50px
  border-radius: 4px 0 0 4px
::placeholder
  color: $primary-gray

.subscribe-btn 
  min-height: 50px
  border-radius:0 4px 4px 0
  background: $base-red
  color: #fff
  font-weight:600

我明白了：

我应该在输入旁边创建另一个白色div还是可以用sass做到这一点？

Answer 1

我发现的解决方案是在输入中添加相对位置，在图像中添加绝对位置，并添加一些顶部和左侧％

.newsletter-icon
  position: absolute
  top: 30%
  left: 3%
  z-index: 2

.newsletter-form
  position: relative

Answer 2

有两种方法可以实现：

要么将图像保留在原来的位置，然后在输入容器相对的情况下使图标绝对定位（对SASS进行一些调整）：

.input-group{
    position:relative;

    img{
       position:absolute;
       left:15px; //Make sure this is left from the border width + padding of input.
       top:calc(50% - 15px); //the 15px should be half of the height of the image. That way it'll be positioned in the middle of the input, regardless of the height.
    }

    input{
        padding-left:50px; //This needs to be the width of the icon + its left positioning + additional padding between the icon and the beginning of the words. 
    }
}

上述方法的问题在于它不是真正可扩展的。如果您在bootstrap网站here上注意到，它概述了所有前置的对象都具有一个span和class来添加其他样式。因为您不打算使用这种样式的引导程序，所以应该执行以下操作：

HTML

<div class="input-group has_icon icon_email">
    <input type="email" class="form-control email-input" placeholder="Votre email">
    <span class="input-group-btn">
         <button class="btn subscribe-btn type="submit">Souscrire</button>
    </span>
</div>

SASS

.input-group{

    &.has_icon{
        position:relative;

        input[type=email]{//Make sure to specify the type of input here, because if you do input type button, this will mess you up.
            padding-left:50px; //This needs to be the width of the icon + its left positioning + additional padding between the icon and the beginning of the words. 
        }
        &.icon_email:before{
            content:"";
            background-image:url(../../../assets/images/Combined Shape.svg);
            pointer-events: none; //You might not want the user to click the icon because it's on an input. Makes it easier to click the input
            position:absolute;
            left:15px; //Make sure this is left from the border width + padding of input.
            top:calc(50% - 15px); //the 15px should be half of the height of the image. That way it'll be positioned in the middle of the input, regardless of the height.
        }
    }
}

执行此方法可确保您的其他具有input-group的代码不会仅被该代码弄乱，因为您正在编码可重复且可重用的类。因此，只有在您应用.has_icon的附加类时，图标才会影响文本，电子邮件等的输入。您可以根据需要调整课程，或者添加更多内容。理想情况下，您不会在同一地方做所有事情，但这是为了尽量减少我的回答。

将图像放入表单输入

2 个答案: