<div class="form__container">
  <form class="form">
    <svg t="1638370815485" class="icon--search" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3749" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
      <defs>
        <style type="text/css"></style>
      </defs>
      <path d="M874.798784 719.859059a456.211411 456.211411 0 1 0-152.8584 136.311873V659.976387l-8.667229 10.243088a293.897852 293.897852 0 1 1 48.063724-66.186111v228.499671l191.466965 191.466965V800.227909z" p-id="3750"></path>
    </svg>
    <input type="search" placeholder="皮裤女短裤真皮" name="search" class="search" />
    <svg t="1638370901048" class="icon--camera" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6029" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
      <defs>
        <style type="text/css"></style>
      </defs>
      <path d="M846.933333 238.933333h-140.8L646.4 149.333333c-6.4-10.666667-17.066667-17.066667-29.866667-17.066666h-209.066666c-12.8 0-23.466667 6.4-29.866667 17.066666l-59.733333 89.6H177.066667c-57.6 0-106.666667 46.933333-106.666667 106.666667v426.666667c0 57.6 46.933333 106.666667 106.666667 106.666666h672c57.6 0 106.666667-46.933333 106.666666-106.666666v-426.666667c-2.133333-59.733333-49.066667-106.666667-108.8-106.666667z m34.133334 533.333334c0 19.2-14.933333 34.133333-34.133334 34.133333H177.066667c-19.2 0-34.133333-14.933333-34.133334-34.133333v-426.666667c0-19.2 14.933333-34.133333 34.133334-34.133333h160c12.8 0 23.466667-6.4 29.866666-17.066667L426.666667 206.933333h170.666666l59.733334 89.6c6.4 10.666667 17.066667 17.066667 29.866666 17.066667h160c19.2 0 34.133333 14.933333 34.133334 34.133333v424.533334z" p-id="6030"></path>
      <path d="M512 364.8c-96 0-174.933333 78.933333-174.933333 174.933333 0 96 78.933333 174.933333 174.933333 174.933334 96 0 174.933333-78.933333 174.933333-174.933334 0-96-78.933333-174.933333-174.933333-174.933333z m0 279.466667c-57.6 0-104.533333-46.933333-104.533333-104.533334s46.933333-104.533333 104.533333-104.533333 104.533333 46.933333 104.533333 104.533333-46.933333 104.533333-104.533333 104.533334z" p-id="6031"></path>
    </svg>
    <button class="button">搜索</button>
  </form>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  padding: 20px;

  display: grid;
  place-content: center;
}

.form__container {
  container-type: inline-size;
  overflow: hidden;
  resize: horizontal;
  min-inline-size: 200px;
  max-inline-size: 80vw;
}

.form {
  display: grid;
  font-size: 46px;
  border: 4px solid #ff5b0a;
  background-color: #fff;
  border-radius: 10rem;
  padding: 10px;
  align-items: center;
}

.icon--search,
.icon--camera {
  width: 1em;
  height: 1em;
  display: none;
}

.search {
  display: none;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100%;
  padding: 0 5px;
  border: none;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 88px;
  border: none 0;
  background-image: linear-gradient(90deg, #ff9602 0%, #ff5b0a 100%);
  border-radius: 10rem;
  color: #fff;
  font-size: 46px;
  font-weight: 700;
}

@container (min-width: 480px) {
  ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #000;
  }
  :-ms-input-placeholder {
    /* IE 10+ */
    color: #000;
  }
  :-moz-placeholder {
    /* Firefox 18- */
    color: #000;
  }
  .form {
    grid-template-columns: min-content 1fr 200px;
    grid-template-areas: "searchIcon searchInput button";
    grid-template-rows: 88px;
    gap: 10px;
  }

  .icon--search {
    display: block;
    grid-area: searchIcon;
  }

  .search {
    grid-area: searchInput;
    display: flex;
    font-weight: 700;
  }

  .button {
    grid-area: button;
  }
}

@container (min-width: 768px) {
  ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #b4b4b4;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #b4b4b4;
  }
  :-ms-input-placeholder {
    /* IE 10+ */
    color: #b4b4b4;
  }
  :-moz-placeholder {
    /* Firefox 18- */
    color: #b4b4b4;
  }
  .form {
    grid-template-columns: min-content 1fr min-content 200px;
    grid-template-areas: "searchIcon searchInput cameraIcon button";
    grid-template-rows: 88px;
    gap: 10px;
  }
  .icon--search {
    fill: #b4b4b4;
  }
  .search {
    color: #b4b4b4;
    font-weight: 400;
  }
  .icon--camera {
    display: block;
    grid-area: cameraIcon;
    fill: #b4b4b4;
  }
}