Bootstrap3 CSS样式输入 [英] Bootstrap3 CSS Style Input

问题描述

我正在尝试创建一个带有下拉列表的搜索字段.我一直在尝试使用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 =您在寻找什么?">< 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">切换下拉菜单</span></button>< ul class ="dropdown-menu">< li>< a href =#" class ="small" data-value ="option1" tabIndex =-1"><输入类型="checkbox"/>& nbsp;选项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 {左:50％；左边距:-350px;页边距:-150px;最低高度:150像素；位置:绝对；文本对齐:居中；最高:50％；宽度:700像素；}.filterOptions {左边框:0px;}.btn-lg {行高:1.22；}#toolSearch:focus {大纲:无；} 

这是我设置的小提琴:

我继续更新了您的小提琴:

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

I am trying to make a search field with a dropdown inside. I have been trying to use bootstrap's input group to give the illusion that the button is inside the field.

This is what I am trying to accomplish in the screenshot below:

This is what I have so far:

I am trying to figure out how to get the dropdown menu to move over to the far right of the search field and get that carrot to show as well.

Any tips on adjusting the position of the menu as well as making that dropdown button have no color on hover?

<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;
}

Here is a fiddle I have set up: https://jsfiddle.net/carlhussey/tfrpncu7/

解决方案

Here is the CSS you need to accomplish what you indicated you wanted:

.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 */
}

Here is what it looks like:

I went ahead and updated your Fiddle:

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

这篇关于Bootstrap3 CSS样式输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！