我试着把搜索框扩展到左边,但不知怎么的,它把宽度和扩展到右边。我试着给左边距,但仍然不工作。
这里它是扩大到右边,但我希望它扩大到左边。我试图添加填充左,但它得到的影响内框,而不是外框。
.search-click {
border: 1px solid #ccc;
outline: none;
background-size: 22px;
background-position: 13px;
border-radius: 100px;
width: 363px;
height: 40px;
padding: 21px;
transition: all 0.5s;
margin-top: 54px;
text-overflow: ellipsis;
position: relative;
overflow: hidden;
//margin-left: -410px;
}
.search-click:focus {
width: 800px;
padding-left: 20px;
}
.search-click input {
background: transparent;
border: 1px solid #ccc;
outline: none;
position: absolute;
width: 300px;
height: 50px;
left: 0%;
padding: 10px;
}
<input type="text" class="search-click" placeholder="Search ports, countries, international code port" />
3条答案
按热度按时间kwvwclae1#
对于左边的宽度过渡,我将输入的位置改为右边。更改了
position: absolute
和right: 0; top: 0
。bvhaajcl2#
您可以使用
direction: rtl
执行此操作y0u0uwnf3#
如果您想从右侧展开它,只需在
.search-click
中添加text-align: end;
。