如何使搜索栏扩展到右侧而不是左侧？

Question

当你将鼠标悬停在这个特定的 div 上时，我试图让搜索栏展开，但我希望它向右展开而不是向左展开（它目前正在这样做）搜索图标也会移动到最右边。有什么办法可以吗？我希望搜索栏位于导航栏的最右侧，因此 float:Right.

.search {
  border-radius: 40px;
  height: 40px;
  background-color: orange;
  float: right;
  transform: translate(-280px, 5px);
}

.search input {
  position: relative;
  left: 20px;
  top: 8px;
  padding: 5px;
  outline: none;
  width: 0px;
  border-radius: 0px 20px 20px 0px;
  border: none;
  background: transparent;
  transition: 0.2s;
}

.search:hover input {
  width: 150px;
}

.btn {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background-color: tomato;
  transform: translate(0px, -25px);
}

.btn i {
  position: Relative;
  top: 12px;
  left: 12px;
}

<div class="search">
  <input type="text" placeholder="search...">
  <div class=btn>
    <i class="fas fa-search"></i>
  </div>
</div>

Answer 1

仅在以下更改css

.search{
    border-radius: 40px;
    height:40px;
    background-color: orange;
   float:left;
   transform: translate(580px,0px);

}

首先，您必须将搜索面板设置在左侧，然后您需要将 translate() 设置为 580px 或更多或更少。

Answer 2

重新设计了样式并添加了以下行为：

输入字段保持打开状态：
- 悬停时；
- 其中有焦点和插入符号；
- 如果有输入文字。
仅当输入任何文本时搜索按钮才会激活。

.search {
  position: relative;
  float: right;
  margin-right: 250px;
  border-radius: 40px;
  overflow: hidden;
  background-color: orange;
}

.search input {
  height: 40px; width: 0;
  padding: 5px 40px 5px 0;
  border: none; outline: none;
  box-sizing: border-box;
  background-color: transparent;
  cursor: pointer;
  transition: 0.2s;
}

.search input:not(:placeholder-shown),
.search input:focus, .search:hover input {
  width: 200px;
  padding: 5px 40px 5px 1em;
  cursor: unset;
}

.btn {
  position: absolute;
  top: 0; right: 0;
  height: 40px; width: 40px;
  border-radius: 20px;
  background-color: tomato;
  cursor: pointer;
  pointer-events: none;
}

.search input:not(:placeholder-shown)+.btn {
  pointer-events: auto;
}

.btn i {
  position: relative;
  top: 10px; left: 10px;
}

<div class="search">
  <input type="text" placeholder="search...">
  <div class=btn>
    <i class="fas fa-search">&#128269;</i>
  </div>
</div>

Answer 3

诚然，我可能有点忘乎所以，但我相信以下内容会按照您的要求进行操作，因为它会向右扩展并将按钮向右移动。

:root{
  --i-trans-fast:350ms;
}

.search{
    border-radius: 40px;
    height:40px;
    background-color:orange;
  /*
    border: added to better define object boundary
    float: set left to facilitate the appearance to the right on mouseover 
  */
  border:2px solid tomato;
    float:left;
}

.search input{
    position: relative;
    left:20px;
    top:8px;
    padding:5px;
    outline: none;
    width:0px;
    border-radius: 0px 20px 20px 0px;
    border: none;
    background: transparent;

    
    /*
      text-indent: added to show space between button and placeholder/text
      transition: changed to make the appearance smoother
      opacity: added to give fade-in
    */
    text-indent:1.5rem;
    transition:ease-in-out all var(--i-trans-fast);
    opacity:0;
}

/*
  added: .search input:focus so that the panel does not disappear
*/
.search:hover input,
.search input:focus{
    width:150px;
    opacity:1;
}

/*
  added to remove ome extra indent which looks
  odd when button has moved to the right
*/
.search input:focus{
  text-indent:0.5rem;
}

/*
  added: various placeholder settings to make text disappear when text
  element has focus.
*/
::-webkit-input-placeholder{
    transition:ease-in-out all 250ms;
}
:-moz-placeholder{
    transition:ease-in-out all 250ms;
}
::-moz-placeholder {
    transition:ease-in-out all 250ms;
}
:-ms-input-placeholder {  
    transition:ease-in-out all 250ms;
}

:focus::-webkit-input-placeholder{
    color:transparent;
}
:focus:-moz-placeholder{
    color:transparent;
}
:focus::-moz-placeholder {
    color:transparent;
}
:focus:-ms-input-placeholder {  
    color:transparent;
}


.btn{
    height:40px;
    width:40px;
    border-radius:20px;
    background-color:tomato;
    transform: translate(0px, -25px);
}

.btn i{
    position:relative;
    top:2px;
    left:7px;
    /*
      opacity:added to give fade-in
      transition: added to make fade-in smooth
    */
    opacity:0;
    transition:ease-in-out opacity var(--i-trans-fast);
}

/*
  added to give fade-in final appearance
*/
.btn:hover i,
.search input:hover + div > i{
    opacity:1;
}

/*
  set content of pseudo element as arrow - initially transparent
*/
.btn i:before{
  font-family:arial;
    content:'BA';
    font-size:2rem;
    color:red;
}


/*
  added to allow smooth movement of search bttn to the right
*/
.search input + div{
  transition:ease-in-out all var(--i-trans-fast);
}


/*
  Added to move the search button to the right
*/
.search input:focus + div{
  transform: translate(123px, -25px) rotateZ(360deg);
}


/*
  change opacity of i elememt
*/
.search input:focus + div > i{
    opacity:1;
    left:10px;
    top:2px;
}

/*
  change color of and content of i pseudo element
*/
.search input:focus + div > i:before{
    color:white;
    content:'[=10=]3F';
}

<div class='search'>
    <input type='text' placeholder='search...' />
    <div class='btn'>
        <i class='fas fa-search'></i>
    </div>
</div>

Answer 4

我意识到主要问题是使用 float:right，所以在删除它之后，添加 display:inline-flex 以允许搜索 div 与导航栏在同一行并且仅使用 transform:translate(x,y) 进行定位，现在可以使用了！ :)

如何使搜索栏扩展到右侧而不是左侧？

how to make search bar expand to right side instead of left?

html

css

transition