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

问题描述

我试图在输入字段中放置一个清除按钮，在搜索图标之前，但它不工作; x显示在输入字段的前面。

我使用绝对定位，右侧：0和top：4px

您可以在这里查看我的示例：

编辑：绝对位置似乎在firefox上bug了... Firefox正在定位绝对元素到 c $ c> input-btn-group （我建议你）与 btn 类，添加类似 a ：hover {box-shadow：none; }

$ 到您的CSS，以避免在您的输入中点击关闭按钮丑陋的 box-shadow

I'm trying to position a clear button inside an input field, at the right before to the search icon, however it's not working; the "x" is displayed in front of the input field instead.

i use absolute positioning with right:0 and top:4px

You can see my example here: http://www.bootply.com/YUwdJ5Kvx6

解决方案

A little update to get what you want: http://www.bootply.com/Lyxyupgg5F

Edit: The absolute position seems to be bugged on firefox... Firefox is positionning the absolute element realtive to input-group instead of input-group-btn event if the second one has position: relative so I updated the code.

I modified your HTML a bit, it looks better (for me). Then you I added position: relative to input-group-btn for position: absolute to work on the close button. Then just a negative right: 36px to move the button in the input field.

I put the close button inside the input-group-btn because it was easier for me, and it automatically takes care of the vertical alignment of your button (I just added the btn class to the a tag).

I added padding-left: 26px !important to the input field to avoid user typing under the x button.

Edit: If you let the a tag inside the input-btn-group (which I advise you) with the btn class, add something like a:hover { box-shadow: none ; } to your CSS to avoid ugly box-shadow in your input when clicking on the close button.

这篇关于在引导输入字段中的位置清除按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！