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

0
votes

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;}`

htmlcssborderz-indexoutline