如何在图标内定位文本？以放大镜图标内嵌字母为例

云上老周

2026-8-18

实现放大镜图标内动态显示大小写字母的效果

核心思路

用 HTML 构建容器，CSS 绘制放大镜样式并定位字母，结合 JavaScript 根据输入文本的大小写切换图标内的字母。

代码实现

HTML 结构

<div class="search-icon-container">
  <div class="magnifier"></div>
  <span class="case-letter">A</span>
</div>
<input type="text" id="text-input" placeholder="输入文本">

CSS 样式

.search-icon-container {
  position: relative;
  width: 40px;
  height: 40px;
}

/* 绘制放大镜图标 */
.magnifier {
  width: 30px;
  height: 30px;
  border: 2px solid #333;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.magnifier::after {
  content: '';
  width: 12px;
  height: 2px;
  background-color: #333;
  position: absolute;
  bottom: -6px;
  right: -6px;
  transform: rotate(-45deg);
}

/* 字母样式，居中在放大镜内 */
.case-letter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

JavaScript 逻辑

const input = document.getElementById('text-input');
const letterEl = document.querySelector('.case-letter');

input.addEventListener('input', function() {
  const inputText = this.value;
  if (!inputText) {
    letterEl.textContent = 'A'; // 默认显示大写A
    return;
  }
  // 判断最后输入的字符大小写
  const lastChar = inputText[inputText.length - 1];
  letterEl.textContent = lastChar === lastChar.toUpperCase() ? 'A' : 'a';
});