Bootstrap3 CSS样式输入

发布时间：2020-12-18 00:29:10 所属栏目：安全来源：网络整理

导读：我正在尝试使用下拉列表创建一个搜索字段.我一直在尝试使用bootstrap的输入组来给出按钮在字段内的错觉. 这是我想在下面的截图中完成的：这是我到目前为止：我试图弄清楚如何让下拉菜单移动到搜索字段的最右边,并显示胡萝卜. 有关调整菜单位置以及制作该下

我正在尝试使用下拉列表创建一个搜索字段.我一直在尝试使用bootstrap的输入组来给出按钮在字段内的错觉.

这是我想在下面的截图中完成的：

这是我到目前为止：

我试图弄清楚如何让下拉菜单移动到搜索字段的最右边,并显示胡萝卜.

有关调整菜单位置以及制作该下拉按钮的任何提示在悬停时都没有颜色吗？

<div class="container div-cntr">
   <div class="form-group">
      <div class="input-group">
         <input type="text" class="form-control input-lg" id="toolSearch" name="toolSearch" placeholder="What are you looking for?">
         <div class="input-group-btn">
            <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
            <ul class="dropdown-menu">
                <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li>
                <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li>
            </ul>
         </div>
      </div>
      <br />
      <button type="button" class="btn btn-default btn-lg">Search</button>
   </div>
</div>

–

.div-cntr {
    left: 50%;
    margin-left: -350px;
    margin-top: -150px;
    min-height: 150px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 700px;
}
.filterOptions{
    border-left: 0px;
}
.btn-lg {
    line-height: 1.22;
}
#toolSearch:focus {
    outline:none;
}

这是我设置的小提琴：https://jsfiddle.net/carlhussey/tfrpncu7/

解决方法

以下是您需要完成所需内容的CSS：

.dropdown-menu {
  right: 0; /* Align dropdown-menu to right instead of left */
  left: auto;
}

.input-group .dropdown-toggle.filterOptions {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 5; /* Fix for 2 input-group-btns and this one not being the last-child */
}

.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover {
  background-color: transparent; /* Fix for dropdown-menu item hover background-color */
}

这是它的样子：

我继续更新你的小提琴：

https://jsfiddle.net/tfrpncu7/3/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!