How can I force the input outline to over or come above the icon box shadow

Question

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 { outline: none !important; border: 2px solid hsl(0, 93%, 68%);}

  #arrow-icon{ width: 90px; height: 52px; position: absolute; background:linear-gradient(to right, hsl(0, 80%, 86%) 0%, hsl(0, 74%, 74%) 100%) ; margin-top: 35px; margin-left: -91px; border-radius: 30px; box-shadow: 3px 16px 10px 0px #f4dddd; cursor: pointer;} #arrow-icon img{ /* width: 10px; height: 20px; */ margin-left: 41px; margin-top: 15px;}`

Answer 1

• Wrap input and span are in a div tag
• add position: relative and the same height & width as input to the div tag
• remove margins to span icon tag and add right and top properties adjust them accordingly