CSS学习案例（10）：动态搜索框

图标：阿里巴巴矢量图标库

<div class="search-box">
        <input class="serach-txt" type="text" name="" placeholder="Type to search">
        <a class="search-btn" href="#"><svg t="1606822073464" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3156" width="25" height="25"><path d="M716.29895 806.808621C641.509798 862.822176 548.629446 896 448 896 200.576432 896 0 695.423565 0 448 0 200.576432 200.576432 0 448 0 695.423565 0 896 200.576432 896 448 896 548.629446 862.822176 641.509798 806.808621 716.29895L946.011456 855.501786C970.889978 880.380314 970.970976 920.635366 945.803174 945.803174 920.809619 970.79673 879.927322 970.436992 855.501786 946.011456L716.29895 806.808621ZM448 768C624.73112 768 768 624.73112 768 448 768 271.26888 624.73112 128 448 128 271.26888 128 128 271.26888 128 448 128 624.73112 271.26888 768 448 768Z" p-id="3157"></path></svg></a>
</div>

*{margin: 0;padding: 0;}
body{
    height: 100vh;width: 100vw;
    background: #eb6004;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-box{
    height: 40px;
    background: #2d3436;
    border-radius: 40px;
    padding: 10px;
}
.search-btn{
    height: 40px;width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
    border-radius: 50%;
    fill: #fff;
    background: #2d3436;
}
.serach-txt{
    border: none;
    background: none;
    outline: none;
    width: 0px;
    border-radius: 40px;
    line-height: 40px;
    float: left;
    padding: 0px;
    color: #fff;
    font-size: 16px;
    transition: 1s;
}
.search-box:hover .serach-txt{
    width: 240px;
    padding: 0px 10px;
}
.search-box:hover .search-btn
{
    fill: #eb6004;
    background: #fff;
}

如何改变图标颜色：使用fill属性