I am attempting to customize the css for my input-group and input-group text when the input is in focus. I am working with bootstrap 5 at the moment.
However, there seems to be some overlap between the input and input-group-text as shown in the image below.
Here is my current 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">Password</label>
<div class="input-group">
<input type="text" class="form-control @error('password') is-invalid @enderror" name="password" id="password" placeholder="Enter password" 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 :
https://i.sstatic.net/AIPBF.png
I have tried adding padding to the input-group-text but it does not seem to work.
UPDATE:
Following HDP's advice, the box shadow looks better now. However, the left and right padding of the shadow appears larger than the default size.