Bootstrap3 CSS Style Input

Question

I am trying to create a search box with a drop down menu inside. I am trying to use the bootstrap input group to create 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'm trying to figure out how to make the drop-down menu go to the far right search box and get this carrot to show as well.

Any tips on adjusting the position of the menu, as well as creating this button on the pop-up menu, do not have color when you hover over?

<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 the fiddle I created: https://jsfiddle.net/carlhussey/tfrpncu7/

Answer 1

Here is the CSS that you need to execute what you specify what you want:

 .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's what it looks like:

I went ahead and updated my script:

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

Answer 2

You must use input-group-lg along with input-group and dropdown-menu-right to correctly position the dropdown menu. For other CSS, use pseudo elements .

Working example: (Level of specificity, so the example works in Stackoverflow.)

 .div-cntr { margin-top: 100px; text-align: center; max-width: 700px; /*for example only*/ background: red; min-height: 300px; /*for example only*/ } .form .open>.dropdown-toggle.filterOptions.focus, .form .open>.dropdown-toggle.filterOptions:focus, .form .open>.dropdown-toggle.filterOptions:hover .input-group-lg>.form-control, .form .input-group.input-group-lg>.input-group-btn>.filterOptions { border: 1px solid #ccc; border-left: 0; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; background: #fff; } .form .dropdown-menu.dropdown-menu-search { top: 60px; right: 110px; border-radius: 0; border: 0; background: #fff; } .form .dropdown-menu.dropdown-menu-search:after { top: -15px; right: 10px; position: absolute; content: ''; border-width: 0px 15px 15px 15px; border-style: solid; border-color: #fff transparent; height: 0; width: 0; } .form .form-control.toolSearch, .form .form-control.toolSearch:focus { outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; border: 1px solid #ccc; border-right: 0; } .form .input-group-btn .btn.btn-search, .form .input-group-btn .btn.btn-search.active { border-radius: 0; border: 1px solid #ccc; border-left: 0; } .form .input-group-btn .btn.btn-search:hover, .form .input-group-btn .btn-search:focus { outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 1px solid #ccc; border-left: 0; border-radius: 0; background: #fff; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container div-cntr"> <div class="form-group form"> <div class="input-group input-group-lg"> <input type="text" class="form-control toolSearch" 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 dropdown-menu-right dropdown-menu-search"> <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> <li> <a href="#" class="small" data-value="option3" tabIndex="-1"> <input type="checkbox" />&nbsp;Option 3</a> </li> <li> <a href="#" class="small" data-value="option4" tabIndex="-1"> <input type="checkbox" />&nbsp;Option 4</a> </li> <li> <a href="#" class="small" data-value="option5" tabIndex="-1"> <input type="checkbox" />&nbsp;Option 5</a> </li> <li> <a href="#" class="small" data-value="option6" tabIndex="-1"> <input type="checkbox" />&nbsp;Option 6</a> </li> </ul> <button role="button" class="btn btn-lg btn-default btn-search"><span class="glyphicon glyphicon-search"></span> Search</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Answer 3

Here's the Fiddle with the position of the dropdown and a button with a white background on `: active '. Let me know if this is what you were looking for.

https://jsfiddle.net/tobyl/4p41p3kg/2/

CSS added:

 .dropdown-menu { left: auto; right: 0; } .open > .dropdown-toggle.btn-default:active, .open > .dropdown-toggle.btn-default:focus { background-color: #fff; } 

Answer 4

I'll start by answering the second part of your question.

When creating this button, the drop-down menu has no color when you hover

Chrome dev-tools (right-click on any element of the page and select the Inspect element ), which can help a lot when it comes to style elements in certain states (for example, hovering). To see which style rule is applied during hover, we can force the button on the button to be imposed using dev-tools . We see .btn-default applying

 .btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; } 

Since this button has the following class priority <button class="btn btn-default btn-lg dropdown-toggle filterOptions"> (classes on the right override rules from classes to the left) We can redefine the hover styles .btn-default by creating a rule for the filterOptions hover filterOptions .

 .filterOptions:hover { background-color: white; border-color: #ccc; } 

Adjusting the position of the menu as well

Again, looking at the dropdown in dev-tools, we can see that the correct style rule for overriding the default position and creating a dropdown on the right is:

 .open>.dropdown-menu { right: 0; left: initial; } 

Updated fiddle: https://jsfiddle.net/tfrpncu7/4/

Remember that css has no idea what it was always a good idea to always use new classes other than bootstrap when styling a specific element. If your project is large, consider using a css naming convention like BEM to reduce the risk of naming collisions.