我正在尝试使用fontawesome中的搜索图标而不是background-image使用转换来扩展输入区域的搜索栏中的搜索图标.单击此图标,该区域应该打开.
我试过了
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" name="eingabe" placeholder="Suche">
<i class="fa fa-search" aria-hidden="true"></i>
</input>
但是然后符号在输入旁边,我无法点击它来使用我的过渡来擦除输入的宽度.
@Saurav几乎解决了我的问题,但我无法点击图标.
.search-bar {
position: relative;
}
.search-bar .icon {
position: absolute;
top: 47%;
left: 10px;
transform: translateY(-50%);
}
.search-bar .input-text {
width: 0px;
border: 0px;
background-color: #fff;
height: 20px;
padding: 8px 8px 8px 35px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.search-bar .input-text:focus {
width: 80%;
background-color: #ccc;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-bar">
<i …