Bootstrap 5 box-shadow is overlapping in input-group

Question

I'm trying to modify the css of my input-group and input-group text when input is in focus In this case i'm using bootstrap 5

But as you can see in the image below. There's some overlapping between input and input-group-text

So far this is my implementation

CSS:

.input-group:focus-within .input-group-text {
        border-color: #ced4da;
    }
    
    .input-group:focus-within .form-control:focus~.input-group-text {
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }

HTML:

<div class="form-group col-xs-6 col-md-6">
    <label for="password" class="required control-label col-form-label text-md-end">Kata sandi</label>
    <div class="input-group">
         <input type="text" class="form-control @error('password') is-invalid @enderror" name="password" id="password" placeholder="Masukkan kata sandi" autocomplete="off">
         <span class="input-group-text rounded-end"><i class="eyepass eyeCross"></i></span> @error('password')
         <div class="invalid-feedback" role="alert">
                 <strong>{{ $message }}</strong>
          </div>
     @enderror
</div>

THE RESULT :

Try to add some padding to input-group-text but seems like not working

UPDATE:

Based on HDP answer the box shadow's look better. But somehow, the shadow left and right padding is looks much bigger than the default size

HDP · Accepted Answer · 2023-03-30T12:42:09.033

1

You will need to set focus box shadow as below css.

.input-group:focus-within .input-group-text {
    border-color: #ced4da;
}
.input-group:focus-within .form-control:focus~.input-group-text {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-color: #80bdff;
    box-shadow: 0.30rem 0 0 0.25rem rgba(0, 123, 255, 0.25);
}
.input-group:focus-within .form-control:focus{
    box-shadow:-0.25rem 0 0 .25rem rgba(13,110,253,.25)
}
.input-group:focus-within .form-control.is-invalid:focus{
    box-shadow:-0.25rem 0 0 .25rem rgba(var(--bs-danger-rgb),.25)
}

Otherwise, You can use 3rd method from here: Icon Inside Input with small custom css

edited Mar 30 '23 at 12:42

answered Mar 30 '23 at 09:27

HDP

4,005
2
36
58

Hello HDP, thanks for the answer. I updates my thread. Based on the css you've given, seems like the box shadow left and right size is bigger than the default bootstrap 5 size. Is it possible to handle that issue? Try to change the box shadow size by myself but the result is bad, the overlap box-shadow is showing again – lauwis Mar 30 '23 at 10:27
I know, but, there is no more possible. because, have not possible to create only particular any one side shadow. Here, We are create outer box shadow & then move any side. Hope, you are understand. – HDP Mar 30 '23 at 11:27
1

@lauwis I have update answer. please try second method. Icon Inside Input with small custom css. Hope, this help. – HDP Mar 30 '23 at 11:36

score 0 · Answer 2 · answered Mar 29 '23 at 17:26

0

Apply outline:none for input

--

answered Mar 29 '23 at 17:26

Nevazno_html_css_js_3

21
5

3

Please edit your question to further elaborate on how exactly you have solved the problem and why your solution works. (include some relevant code from the original post) – Rojo Mar 29 '23 at 23:54
outline: none in input is not working – lauwis Mar 30 '23 at 07:48
@Rojo The problem is not solved yet – lauwis Mar 30 '23 at 07:48
@lauwis as I can see input type=password when you write something it displays as text - give us reproducible example so we can help you – Nevazno_html_css_js_3 Mar 30 '23 at 08:03
@Nevazno_html_css_js_3 it's just because i toggle the eye icon to show the password – lauwis Mar 30 '23 at 08:06
It's possible using this online compiler https://angrytools.com/bootstrap/editor/ to run it and the overlapping box shadow will show up – lauwis Mar 30 '23 at 08:11

Bootstrap 5 box-shadow is overlapping in input-group

2 Answers2