<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.