使 select 列表与文本框高度相同

Question

我正在尝试使文本框左侧的过滤器与文本框的高度完全相同，但宽度更小；和这张照片一模一样

我的代码和当前搜索框如下所示：

<div class="container">
<div class="row">
    <div class="col-xs-8 col-xs-offset-2">
        <form action="#" method="get" id="searchForm" class="input-group">

            <div class="input-group-btn search-panel">
                <select name="search_param" id="search_param" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <option value="all">All</option>
                    <option value="username">Username</option>
                    <option value="email">Email</option>
                    <option value="studentcode">Student Code</option>
                </select>
            </div>
            <input type="text" class="form-control" name="x" placeholder="Search term...">
            <span class="input-group-btn">
                <button class="btn btn-default" type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </form><!-- end form -->
    </div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->

Answer 1

CSS 已关闭，因为您将 <select> 元素用作 <button class="dropdown-toggle">。将您的 HTML 更改为以下内容：

<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <form action="#" method="get" id="searchForm" class="input-group">

        <div class="input-group-btn search-panel">
          <button id="search_condition" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">All <span class="caret"></span></button>
          <input name="search_param" value="all" type="hidden">
          <ul class="dropdown-menu">
            <li class="option_select" data-value="all"><a href="#">All</a></li>
            <li class="option_select" data-value="username"><a href="#">Username</a></li>
            <li class="option_select" data-value="email"><a href="#">Email</a></li>
            <li class="option_select" data-value="studentcode"><a href="#">Student Code</a></li>
          </ul>
        </div>
        <input class="form-control" name="x" placeholder="Search term..." type="text">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </form><!-- end form -->
    </div><!-- end col-xs-8 -->
  </div><!-- end row -->
</div><!-- end container -->

将您的 <select> 替换为一个按钮，该按钮可切换带有选项列表的下拉列表，每个选项的属性 data-value="" 与 select 中选项的值相匹配。这修复了 CSS 问题，但您需要一些自定义 JavaScript 来处理选项的 selection:

$(".option_select").on("click", function(){
  $("input[name=search_param]").val($(this).attr("data-value"));
  $("#search_condition").html($(this).text() + ' <span class="caret"></span>');
});

这样做的目的是将按钮的标签设置为选项的标签，并将隐藏的 <input> 元素的值设置为 selected 选项的值。

这里还有一个工作示例：

Bootply

Answer 2

试试这个：

<div class="container">
<div class="row">
    <div class="col-xs-8 col-xs-offset-2">
        <form action="#" method="get" id="searchForm" class="input-group" >

            <div class="input-group-btn search-panel">
                <select name="search_param" id="search_param" class="btn btn-default dropdown-toggle  form-control" style="width:150px;" data-toggle="dropdown">
                    <option value="all">All</option>
                    <option value="username">Username</option>
                    <option value="email">Email</option>
                    <option value="studentcode">Student Code</option>
                </select>
            </div>
            <input type="text" class="form-control" name="x" placeholder="Search term...">
            <span class="input-group-btn">
                <button class="btn btn-default form-control" type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
            <!-- <button class="btn btn-primary" type="submit">Search</button> -->
        </form><!-- end form -->
    </div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->

使 select 列表与文本框高度相同

Make select list same height as text box

html

css

button

navbar

twitter-bootstrap