您好，我的网站上有一个搜索箭头，向右箭头则同时在左侧和右侧转换。因为箭头在我网站的右侧，所以我只希望它向左过渡。
换句话说，我希望搜索图标保持原位而不移动，并且输入仅向左过渡，以便您可以输入输入内容。我希望这是有道理的。
body {
background: darkgrey;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
/* position: absolute; */
color: lightblue;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>您只需要更改以下几个属性：
.search-box {
position: absolute;
top:50%;
right:50%;
transform: translate(0, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
请在下面找到完整的代码。希望能帮助到你。
body {
background: darkgrey;
}
.search-box {
position: absolute;
top:50%;
right:50%;
transform: translate(0, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
/* position: absolute; */
color: lightblue;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>只需在CSS中添加一些焦点并进行有效检查即可。如果您只想让输入从其位置向左滑动，请告诉我，我将更改代码
body {
background: darkgrey;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt , .search-txt:focus, .search-txt:valid {
width: 240px;
padding: 0 6px 0 50px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
position: absolute;
color: lightblue;
left: 10px;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 40px;
}<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to Search" required>
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>