SBB SBB - 4 months ago 13
CSS Question

Bootstrap3 CSS Style Input

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:

enter image description here

This is what I have so far:

enter image description here

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/

Answer

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:

enter image description here

I went ahead and updated your Fiddle:

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

Comments