无法控制 CSS 过渡中的可点击区域

Question

我正在尝试创建一个滑动搜索 bar/box，它会在您 select 放大镜时移动。问题是只有一个小的 space，您可以在其中 select 放大镜打开搜索栏。然后，当搜索栏打开时，关闭它的 space 向后移动（放大镜的右侧）大约 5 px。我希望 select 可用区域始终位于放大镜上。

这是HTML

<div class="wrap">
  <form action="" autocomplete="on">
    <input id="search" name="search" type="text" placeholder="Search by Address, Agent or Client..."/>
   <span class="fa fa-search"></span>
</form>

这是CSS

body {
background: #005DC1;
font-size: 15px;
}

.wrap {
 position: relative;
 right: 50px;
 height: 22px;
 float: right;
}

input[type="text"] {
height: 20px;
width: 0px; 
font-size: 12px;
font-family: helvetica;
border: none;
outline: none;
color: rgba(255, 255, 255, 0.8);
padding: 3px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 1;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}

input[type="text"]:focus:hover {
 border-bottom: 1px solid #fff;
}

input[type="text"]:focus {
  width: 250px;
  z-index: 1;
  border-bottom: 1px solid #fff;
  cursor: text;
}

.wrap span {
  color: rgba(255, 255, 255, 0.8);
  z-index: 5000;
  cursor: pointer;
  right: 3px;
  height: 20px;
  width: 25px;
}

这是我现在的 CodePen。

这是原文Codepen我正在尝试用我自己的设计进行模仿。

Answer 1

我认为您只需要在输入中添加 padding-right，请参阅 this CodePen

无法控制 CSS 过渡中的可点击区域

Can't control clickable area in CSS transition

html

css

css-transitions