Bootstrap3 CSS样式输入

发布时间:2019-04-24 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了Bootstrap3 CSS样式输入脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用下拉列表创建一个搜索字段.我一直在尝试使用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/

总结

以上是脚本之家为你收集整理的Bootstrap3 CSS样式输入全部内容,希望文章能够帮你解决Bootstrap3 CSS样式输入所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: