Assessment wanted for Advanced form styling 1 skill test. Task-1.

Task-1.

by EiNzp

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Advanced styling: Task 1</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>

  <body>
    <form>
      <input type="search" name="search" id="search" aria-label="Search our site">
      <div></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;
}

/* my code */

/* I don't have macOS, so I can't track down those features that don't change when changing the width, height, and so on.
In chrome, opera and mozilla everything seems to work the same way on my system.
I completed this task the way I would for macOS, at least based on what I understood while studying. I hope you can point out my mistakes to me. And maybe you can tell me if there is any way to test the code and see how it behaves in macOS. */

input[type="search"] {
    /* task 1 */
    width: 206px;
    height: 1.5em;
    padding: 1px 2px;
    border-color: rgb(118, 118, 118);
    /* task 2 */
    appearance: none;
    /* task3 */
    border: 1px solid rgb(118, 118, 118);
    border-radius: 3px;
    /* task 4 */
    outline: none;
}

/* task 5 */

input[type="search"]:hover,
input[type="search"]:focus {
    border: 2px black solid;
    background-color: #eee;
    padding: 0px 1px;   
}

input[type="search"]:focus {    
    box-shadow: 0px 0px 2px 1px red;    
}

/* task 6 */


input[type="search"]+div{
    position: relative;
}

input[type="search"]+div::after{
    position: absolute;
    content: url(https://raw.githubusercontent.com/mdn/learning-area/main/html/forms/tasks/advanced-styling/search-24px.png);
    height: 24px;
    width: 24px;
    top: -24px;
    left: 210px;
}