Assessment wanted for Advanced form styling 1 skill test

Advanced form styling 1

by shivani0005

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Advanced styling: Task 1</title>
  </head>

  <body>
    <form>
      <input type="search" name="search" id="search" aria-label="Search our site">
      <div class="icon"></div>
    </form>
  </body>

</html>

CSS

body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }

      button,
      input,
      select {
        font-family: inherit;
        font-size: 100%;
        padding: 0; margin: 0;
      }
      input[type="search"]{
        appearance: none;
        appearance: searchfield;
        width: 96%;
        height: 2em;
        padding: 0;
        border: 2px solid #000;
      }
      input[type="search"]:not(:focus, :active)::-search-cancel-button {
         display: none;
       }
       input[type="search"]:hover,
       input[type="search"]:focus{
         border: 3px solid blue;
         box-sizing: border-box;
       }
      input[type="search"] + div{
        content: url('https://raw.githubusercontent.com/mdn/learning-area/main/html/forms/tasks/advanced-styling/search-24px.png');
       position: absolute;
       left: 770px;
       bottom: 386px;
      }
      
      .icon{
         position: relative;
       }
       
       /*
       .icon:: before{
         content: url('https://raw.githubusercontent.com/mdn/learning-area/main/html/forms/tasks/advanced-styling/search-24px.png');
         
       } */