如何使投入向两边扩展

Question

我有一个输入栏，下面有css。每次选择它时，它都应该展开。但是，它只会向左侧扩展，而不会向右侧扩展。(我希望它在右边展开(这可能是一个副本，所以如果是，请将其标记为一个。然而，我就是找不到什么告诉我该怎么做？

html:

<input placeholder = "search something up"id = "searchbar" name = "search">

css：

#searchbar{
margin-left: 10px;
background: #FFF;
padding: 1px 1px 1px 5px;
position: relative; top: 0; left: 0;
width: 178px;
height: 21px;
outline: none;
border: 1px solid #CCCCCC;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#searchbar:focus{
width: 100%;
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;
top: 0;
right: 100%; 
}

Answer 1

用div包装搜索input，并在包装的div上定义text-align:center。
遵循以下片段：

.input-wrap{
text-align: center;
}	
#searchbar{
background: #FFF;
padding: 1px 1px 1px 5px;
position: relative; top: 0; left: 0;
width: 178px;
height: 21px;
outline: none;
border: 1px solid #CCCCCC;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
text-align: center;
}
#searchbar:focus{
width: 100%;
width: 300px;
}

<div class="input-wrap">
<input type="text" name="search" id="searchbar" placeholder="Search">
</div>

Answer 2

我已经编辑了您的代码。检查一下。

#searchbar{
margin-left: 50px;
background: #FFF;
padding: 1px 1px 1px 5px;
position: relative; top: 0; left: 0;
width: 178px;
height: 21px;
font-size: 12px;
outline: none;
border: 1px solid #CCCCCC;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#searchbar:focus{
background: #FFF;
padding: 1px 1px 1px 5px;
height: 21px;
border: 1px solid #CCCCCC;
top: 0;
right: 100%; 
font-size: 14px;
transform: scalex(1.2);
font-stretch: ultra-condensed;
}

<div class="input-wrap">
<input type="text" name="search" id="searchbar" placeholder="Search">
</div>

Answer 3

我也在寻找这个问题，现在我想知道该怎么办了。这是我的代码

HTML

<input type="text" placeholder="Search Google or type a URL" class="search-bar">

CSS

.search-bar{
width: 500px;
height: 28px;
border-radius: 20px;
margin-left: 20px;
margin-left: 20px;
border: none;
box-shadow: 2px 2px 5px 2px rgba(171, 171, 171 , 0.3);
color: grey;
padding-left: 15px;
outline: none;
transition: 0.3s;
}
.search-bar:hover{
width: 504px;
margin-left:18px;
margin-right:18px;
}

Answer 4

我建议使用scaleX转换，它将处理允许在两侧扩展的问题。

scaleX=>通过给定X轴的值来定义缩放变换

#searchBar:focus{
.
.
.
transform:scaleX(scaleValue);
}