我想在搜索框中有一个可点击的搜索图标,但该图标在搜索框中不可见。类 icon-search 似乎不起作用。我使用 bar 而不是 navbar 来自定义其高度和它的工作正常。另外,我应该如何自定义搜索框的高度?
<div class="bar navbar-inverse navbar-fixed-top">
<div class="container">
<span id="logo">
<a href="main.php">XYZ</a>
</span>
<span class="col-xs-5 right-inner-addon ">
<i class="icon-search"></i>
<input type="text" class="form-control" />
</span>
</div>
</div>
.right-inner-addon {
padding-top: 6px;
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 6px;
pointer-events: none;
}
.bar{
min-width: 800px;
background-color: #563d7c;
width:100%;
height:43px;
box-shadow: 0px 3px 25px #888888;
position: fixed;
}
最佳答案
如果您使用的是 Bootstrap 3,您可以尝试使用以下代码:http://jsfiddle.net/D2RLR/5888/
<div class="bar navbar-inverse navbar-fixed-top">
<div class="container">
<span id="logo">
<a href="main.php">XYZ</a>
</span>
<span class="col-xs-5 right-inner-addon ">
<div class="input-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Test" />
<span class="input-group-addon" for="search">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
</span>
</div>
</div>
关于html - 搜索图标在搜索框中不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23564863/