我正在尝试使用 search icon from 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 class="icon fa fa-search"></i>
<input class="input-text" type="text" name="eingabe" placeholder="Suche">
</div>
最佳答案
您可以尝试使用 div
(例如 .search-bar
)容器,我们可以在其中使用带有 CSS 定位 的搜索图标并搜索输入并将其包装起来,以将其视为占位符,例如:
<div class="search-bar">
<i class="icon fa fa-search"></i>
<input class="input-text" type="text" name="eingabe" placeholder="Suche">
</div>
您还需要一些jQuery(只是为了切换类),并使用max-width
。而不是 .input-text
的宽度喜欢:
JS(jQuery - 用于切换“事件”类)
$('.search-bar .icon').on('click', function() {
$(this).parent().toggleClass('active');
});
CSS(切换事件类时)
.search-bar.active .input-text {
max-width: 80%;
border: 1px solid #ccc;
background: #eee;
}
看看下面更新的代码段:
$('.search-bar .icon').on('click', function() {
$(this).parent().toggleClass('active');
});
.search-bar {
position: relative;
}
.search-bar.active .input-text {
max-width: 80%;
border: 1px solid #ccc;
background: #eee;
}
.search-bar .icon {
cursor: pointer;
position: absolute;
top: 47%;
left: 0;
transform: translateY(-50%);
padding: 13px 15px 13px 11px;
}
.search-bar .input-text {
max-width: 0;
border: 0;
border-color: #ccc;
height: 20px;
padding: 8px 6px 8px 35px;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-bar">
<i class="icon fa fa-search"></i>
<input class="input-text" type="text" name="eingabe" placeholder="Suche">
</div>
希望这对您有所帮助!
关于html - 搜索栏中的 Fontawesome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46883381/