引导程序输入字段中的位置清除按钮

我试图在输入字段内，在搜索图标之前的右侧放置一个清除按钮，但它不工作;相反，“x”显示在输入栏的前面。引导程序输入字段中的位置清除按钮

我使用绝对定位右：0和顶部：4PX

您可以在这里看到我的例子：http://www.bootply.com/YUwdJ5Kvx6

2014-05-16 Wesley

这应该工作。修改了一下HTML，但是这应该会让你在那里：http://www.bootply.com/KTTvsKle3v。可能需要使用FF的“z-index”，也许还需要HTML堆叠顺序。我在应用中使用了相同的技术，效果很好。 – dward

一个小更新得到你想要的东西：http://www.bootply.com/Lyxyupgg5F

编辑：绝对位置，似乎在Firefox中被窃听...... Firefox是positionning绝对元素realtive到input-group而不是input-group-btn事件如果第二个有position: relative，所以我更新了代码。

我修改了一下你的HTML，它看起来更好（对我来说）。然后，我添加了position: relative到input-group-btn,position: absolute以关闭按钮。然后输入负数right: 36px来移动输入字段中的按钮。

我把close按钮input-group-btn里面，因为这是对我来说更容易，它会自动把你的按钮垂直对齐的照顾（我刚添加的btn类的a标签）。

我将padding-left: 26px !important添加到输入字段以避免用户在x按钮下键入。

编辑：如果让input-btn-group内a标签（我劝你）与btn类，添加类似a:hover { box-shadow: none ; }你的CSS，以避免丑陋box-shadow在输入上的关闭按钮点击时。

来源

2014-05-16 12:53:33 Holt

谢谢，但它似乎并没有在Firefox中工作，有什么想法为什么？ – Wesley

@Wesley嗯，似乎是Firefox中的一个bug ...根据CSS规范，一个带有position：absolute的元素应该根据它的第一个父元素定位position：relative（在我们的例子中是'input -group-btn'）。无论如何，我更新了我的答案，将'left：-34px'更改为'right：36px'，以使其适用于Firefox，Chrome和IE9。我没有检查其他浏览器，但应该没问题。 – Holt

试试这个之前和之后我已经附加按钮。评论这是否是你想要的。我有理解你了吗？

<form action="#" method="get" class="sidebar-form" id="id_search" style="width:300px;margin-left:100px;margin-top:100px;"> 

    <div class="input-group double-input"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
    </span> 
    <input type="text" placeholder="Second" class="form-control" /> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
    </span> 

    </div><!-- /input-group --> 
</form>

来源

2014-05-16 12:48:48 Kshitiz

引导程序输入字段中的位置清除按钮

回答

相关问题