纯 css 实现带搜索图标的圆角输入框需用 + 组合：外层设 position: relative 和整体 border-radius，输入框右圆角置 0 并加 padding-right，按钮 position: absolute 右对齐、左圆角匹配，图标用内联 svg 确保可缩放与主题适配，统一 font: inherit 和 line-height: normal 避免错位，移动端设 min-width/min-height: 44px 保障点击热区。
怎么用纯 HTML + CSS 实现带搜索图标的圆角输入框
不需要 JavaScript，也不依赖图标字体或 SVG 外链，用 <input> + <button></button> 组合 + CSS 定位就能搞定。核心是让按钮紧贴输入框右侧、不破坏圆角、点击区域合理。
- 输入框本身设
border-radius: 8px，但右侧圆角会被按钮遮盖，所以得把输入框的右上/右下圆角设为0，由外层容器统一控制整体圆角 - 按钮用
position: absolute贴右对齐，宽度固定（比如36px），高度与输入框一致，border-radius只设左半边（0 8px 8px 0） - 输入框加
padding-right: 36px，避免文字被按钮遮住；按钮内用::before或背景图显示搜索图标（推荐用 inline SVG，免加载、可缩放） - 注意
box-sizing: border-box必须全局或显式设置，否则 padding + border 会让整体宽度超预期
为什么不能直接用 background-image 给 input 加图标
很多教程教你在 <input> 上用 background-image + background-position: right 50%，看似简单，但实际踩坑多：
- 图标无法响应点击——用户点图标区域不会触发
focus或提交，必须额外加 JS 监听 - 不同浏览器对
background-position的解析有偏差，尤其在高 DPI 屏幕下图标容易偏移 - 圆角输入框里，背景图会随
border-radius裁剪，但裁剪边界不精确，右侧图标常被切掉一半 - 暗色主题下，如果用 PNG 图标，没法自动适配颜色；SVG 则能用
currentcolor继承文本色
按钮和输入框怎么对齐才不出现 1px 错位
错位通常不是因为 margin/padding 没清零，而是 line-height、font-size、vertical-align 默认值干扰了基线对齐。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给
<input>和<button></button>都设font: inherit和line-height: normal，避免继承父级不可控的行高 - 外层用
display: inline-flex包裹，设align-items: stretch，让子元素高度自动拉齐 - 按钮加
border: none; background: transparent，再手动加边框（如果需要），否则不同浏览器默认边框粗细/颜色不一致 - 慎用
vertical-align: middle—— 它按字母基线对齐，在字号小的时候反而更容易错位
移动端点击区域太小怎么办
原生 <button></button> 在 iOS 上最小点击热区是 44×44pt，但默认按钮可能只有 36×36px，导致点不准。
- 用
min-width: 44px+min-height: 44px强制扩大热区，再用padding: 0和overflow: hidden保证视觉尺寸不变 - 图标 SVG 内部用
viewBox="0 0 24 24"，然后用width: 16px控制显示大小，留出足够内边距做热区 - 不要只靠
touch-action: manipulation，它只是加速点击响应，不解决热区不足问题 - 测试时真机连 Safari 开发者工具，看 “Elements → Styles” 里 computed 的
touch-action和height是否生效
圆角、图标、对齐、触控——四个点环环相扣，改一个参数常要同步调另外三个。最易忽略的是：外层容器没设 position: relative 就直接对按钮 absolute 定位，结果按钮飞到页面顶部去了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
