在引导输入字段中的位置清除按钮 [英] Position clear button in bootstrap input field

问题描述

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

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

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

解决方案

稍微更新一下即可获得所需内容： http://www.bootply.com/Lyxyupgg5F

编辑：绝对位置似乎在firefox上bug了... Firefox正在定位绝对元素到 input-group 而不是 input-group-btn 事件，如果第二个有 position：relative 所以我更新了代码。

有点，它看起来更好（对我来说）。然后你为添加 position：relative 到 input-group-btn position：absolute 来使用关闭按钮。然后只需一个负值 right：36px 即可在输入字段中移动按钮。

$ c> close 按钮，因为它对我来说更容易，并且它会自动处理您的按钮（我只是将 btn 类添加到 a 标记）。

我添加了 padding-left：26px！important 到输入字段，以避免用户在 x 。如果您在 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.

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