我试图修改我的输入组和输入组文本的css时，输入是在焦点在这种情况下，我使用的是bootstrap 5
但是正如你在下面的图片中看到的。在input和input-group-text之间有一些重叠
到目前为止，这是我的实现
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>

结果：

尝试在input-group-text中添加一些填充，但似乎不起作用

更新日期：

基于HDP的回答，框阴影的外观更好。但不知何故，阴影左右填充看起来比默认大小大得多