Button after input overlaps border in input group

[jrysig]

@mdo Are you sure about this recent change?
864c657

With light button background the missing border between input and following button seems strange to me, please see https://codepen.io/anon/pen/EwwmbK

When you hover or focus input, border is displayed.

[mdo]

It looked better with the default Bootstrap button styles there 😁

[mdo]

I'll see what I can do. The focus state is right as it overlaps the content that comes after it—might just need to mess with the z-index more to ensure proper overlapping.

[splice7]

@mdo you are right. This worked for me:

.theinput:hover + .thebutton {
	z-index: 3;
}

.theinput:focus + .thebutton {
	z-index: 2;
}

It might not be the most elegant but it proves that z-index is the way to go.

[alecpl]

I have a similar issue not related to buttons, but I think the change in last comment will not work. Consider two text inputs in a line, first focused. Then if you hover over the second input the focus shadow on the first will be broken. https://codepen.io/alecpl/pen/PJgRob

[ysds]

Hi @alecpl, Bootstrap does not support multiple form-controls in a single input group

http://getbootstrap.com/docs/4.0/components/input-group/#basic-example

@mdo I'm working on creating PR for this issue, but I need your help about z-index specifications. In normal state (not hovered/focused/actived), the following patterns are considered. Which one is the most preferable?

[mdo]

The second one is most ideal. Apologies for the delayed response—missed this while I was out this last week on vacation.

[ysds]

@mdo thank you for your reply.

Input groups has become also support custom selects and custom files, we should check these z-indexes. I noticed about unsure z-index value of custom files, I reported the issue #24632 and PR.

[ysds]

I have been considering this issue for a while and noticed further related subject. I will create a issue later.

[mdo]

This will likely be addressed by #25020.

[mdo]

#25020 merged, so closing.

[iliajie]

The simple solution for existing projects would be simply adding this rule:

.form-control:focus
{
    z-index: 9999;
    position: relative;
}