Css 搜索栏仅向右侧过渡

我想使用这个搜索栏，但需要 过渡只到右边，是可以做到的 完全使用css？

---

容器已应用

显示：flex

并

调整内容：中心

。从类名中删除

justify content center

。下面是一个片段：

body，html{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
背景：#e74c3c！重要；
}
.搜索栏{
页边距底部：自动；
页边顶部：自动；
高度：60px；
背景色：š353b48；
边界半径：30px；
填充：10px；
}
.search\u输入{
颜色：白色；
边界：0；
大纲：0；
背景：无；
宽度：0；
插入符号颜色：透明；
线高：40px；
过渡：宽度0.4s线性；
}
.searchbar:hover>.search\u输入{
填充：0 10px；
宽度：450px；
插入符号颜色：红色；
过渡：宽度0.4s线性；
}
.searchbar:hover>.search\u图标{
背景：白色；
颜色：#e74c3c；
}
.search_图标{
高度：40px；
宽度：40px；
浮动：对；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：50%；
颜色：白色；
文字装饰：无；
}

很棒的搜索框