在搜索输入标签内添加图标？

Question

我有这个：

    body { background: #666; }

    #header-search {
      width: 200px;
      background: black;
      color: white;
      font-size: 12pt;
      border: 0px solid;
      outline: 0;
      vertical-align: -50%;
    }
    
    #header-search::-webkit-input-placeholder {
        color: white;
    }
    
    #search-field svg {
        fill: white;
        width: 30px;
        heigth: 30px;
    }

    <div id="search-field">
    	<input type="search" id="header-search" placeholder="Search..." />
    	<svg id="search-icon" class="search-icon" viewBox="0 0 24 24">
    	    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    	    <path d="M0 0h24v24H0z" fill="none"/>
    	</svg>
    </div>

我想将 SVG 图标放在搜索输入字段的最后，我该怎么做？我现在得到的是图标在外面，而且非常难看。

Answer 1

只需使用图标上的

relative

position

即可。

调整

right

以适应其宽度，以便将其向左移动，使其出现在

input

内部。调整

vertical-align

使其保持在中间。不要忘记

padding-right

上足够的

input

，以防止文本溢出到图标中。

#search-icon { position: relative; right: 28px; }

片段：

#header-search {
  display: inline-block; width: 200px; height: 32px;
  background: black; color: white; border: none; outline: none;
  font-size: 12pt; padding: 4px 28px 4px 4px; vertical-align: middle;
}
#search-icon {
  position: relative; right: 28px;
  fill: white; width: 24px; height: 24px;
  vertical-align: middle; cursor: pointer;
}

<div id="search-field">
  <input type="search" id="header-search" placeholder="Search..." />
  <svg id="search-icon" class="search-icon" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
</div>

Answer 2

给你。

将

#search-field svg

赋予

absolute

位置，将

#search-field

赋予

relative

位置

#header-search {
  width: 200px;
  background: @header-color;
  color: black;
  font-size: 12pt;
  border: 0px solid;
  outline: 0;
  vertical-align: -50%;
  height: 44px;
  border: 1px solid #333;
}

#header-search::-webkit-input-placeholder {
  color: black;
}

#search-field svg {
  fill: red;
  width: 30px;
  position: absolute;
  top: 8px;
  right: 0;
}
#search-field{display: inline-block; position: relative}

<div id="search-field">
  <input type="search" id="header-search" placeholder="Search..." />
  <svg id="search-icon" class="search-icon" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
</div>

Answer 3

使用

position:absolute

body { background: #666; }

    #header-search {
      width: 200px;
      background: black;
      color: white;
      font-size: 12pt;
      border: 0px solid;
      outline: 0;
      vertical-align: -50%;
    }
    
    #header-search::-webkit-input-placeholder {
        color: white;
    }
    #search-field { position:relative; display:inline-block;}
    
    #search-field svg {
        fill: white;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
      right: 10px;
      z-index:200;
    }

<div id="search-field">
    	<input type="search" id="header-search" placeholder="Search..." />
    	<svg id="search-icon" class="search-icon" viewBox="0 0 24 24">
    	    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    	    <path d="M0 0h24v24H0z" fill="none"/>
    	</svg>
    </div>

Answer 4

这是最简单的方法：

<input
        type="text"
        className="search-input"
       ...
/>

在你的CSS中：

.search-input {
    background: url("../../../src/assets/icons/search_icon.svg") no-repeat 10px 10px;
 }

• 确保在 URL 中放入相对于您调用位置的路径，而不仅仅是内容根目录的路径。

10px 10px - 这允许您将图标定位在输入组件内所需的位置。