如何强制输入轮廓超过或超过图标框阴影答案

【问题标题】：How can I force the input outline to over or come above the icon box shadow如何强制输入轮廓超过或超过图标框阴影
【发布时间】：2021-12-25 07:07:23
【问题描述】：

enter image description here

HTML

  <input type="email" placeholder="Email Address"  id="main-input" >
  <span id="arrow-icon"><img src="images/icon-arrow.svg" alt="arrow icon"></span>
  <span id="error-icon"><img src="images/icon-error.svg" alt="error icon"></span>

CSS
```
  #main-input{
width: 400px;
height: 30px;
border: 2px solid lightgray;
border-radius: 30px;
z-index: 100;}
```
#main-input:focus { 大纲：无！重要；边框：2px 实心 hsl(0, 93%, 68%);}

#箭头图标{ 宽度：90px；高度：52px；位置：绝对；背景：线性渐变（向右，hsl(0, 80%, 86%) 0%, hsl(0, 74%, 74%) 100%）；边距顶部：35px；左边距：-91px；边框半径：30px；盒子阴影：3px 16px 10px 0px #f4dddd; 光标：指针；} #箭头图标img{ /* 宽度：10px；高度：20px； */ 左边距：41px；上边距：15px;}`

【问题讨论】：

标签： html css border z-index outline

【解决方案1】：

包装输入和跨度在一个 div 标签中
添加位置：相对且高度和宽度与 div 标签的输入相同
删除边距以跨图标标签并添加右和顶部属性相应地调整它们

【讨论】：