The box-shadow feature in Bootstrap 5 is causing overlap issues within the input-group

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.

https://i.sstatic.net/4uJVv.png

Answer №1

To implement the focus box shadow, apply the following 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)
}

Alternatively, you can explore a different method outlined in this post: Icon Inside Input with small custom css

Answer №2

Use outline:none to remove the outline on input fields

--

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Select option at the top of the Bootstrap dropdown

I recently implemented Bootstrap on my website. I encountered an issue with a form in the footer section where the select options are extending out of the page boundaries. <footer> <form role="form" method="GET"> <div s ...

Tips for overlaying text on an image in html with the ability to zoom in/out and adjust resolution

My challenge is aligning text over an image so that they move together when zooming in or out. However, I am facing difficulties as the text and image seem to move in different directions. I have attempted using media queries and adjusting the positions of ...

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

What is preventing npm sass from compiling properly?

https://i.stack.imgur.com/ekbNW.png While making edits to my code, I've noticed that the sass-compiler isn't indicating any errors (red lines) or successful compilations (green lines). Can someone help me identify where I might be going wrong? ...

Tips for locking the button in the navigation bar while scrolling

I noticed that when I have 6 fields in my navbar, with 5 of them being links and one as a dropdown, the scrolling of the page causes all fields to remain fixed except for the dropdown field.Check out this image description for reference https://i.stack.im ...

Button inside table cell not showing Bootstrap tooltip

I've implemented a feature where each row in a table has a button that triggers a pop-up modal when clicked. I want these buttons to display tooltips when hovered over and when focused. Below is an example of the HTML structure: <link hr ...

I desire to alter the description of an item within a separate div, specifically in a bootstrap

I used the map method to render all the images. However, I need a way to track the current image index so that I can change the item description located in another div. Alternatively, if you have any other solutions, please let me know. App.js : import Ca ...

Can we use ToggleClass to animate elements using jQuery?

I have a section on my website where I want to implement an expand feature. I am currently using jQuery's toggleClass function to achieve this effect. jQuery('.menux').click(function() { jQuery(this).toggleClass('is-active&a ...

Adjusting content within a div using a loop with a pause interval

I am working on a project where I need to manipulate the content of a div. Here is the initial code snippet: <div class="mytext">first</div> My goal is to dynamically change this text from 'first' to 'second' after 5 s ...

Include a hyperlink in an email using PHP

I am currently using an HTML form textarea along with PHP to send emails through my website. My question is, how can I successfully insert a link into the email message body? I attempted to do it like this: <a href="http://www.xxxxx.com/">Visit the ...

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: https://i.sstatic.net/GpvfC.png <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={th ...

Interactive sidebar scrolling feature linked with the main content area

I am working with a layout that uses flexboxes for structure. Both the fixed sidebar and main container have scroll functionality. However, I have encountered an issue where scrolling in the sidebar causes the scroll in the main container to activate whe ...

Tips for stopping the loading of background images on an image slider

I am utilizing unslider to showcase an image slider on the landing page of my website. The slides are designed with background images in the CSS, and they adjust based on the media query. My concern is that I don't want all the slider images to load a ...

Is it possible to retrieve a background-size value of 'auto' using jQuery, JavaScript, or CSS methods?

Just imagine background-size: 50% auto; If I desire to capture the "auto" value, is there a way for me to determine the new height or width? ...

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Looking to tidy up my HTML/CSS. Is there a way to keep this JavaScript functioning without needing to add the class name to every li element within the ul? Any suggestions on how to improve the visual appeal and readability of the HTML code? const Profi ...

Automatically populate the next dropdown menu depending on the answer provided in the previous field

Can you help guide me in the right direction with 2 questions I have? If the answer to the first question is 1, then I would like the following answer to automatically be populated as Yes. Please assist me! <div class="field"> <!-- Number of Em ...

How can I create my own custom pagination and sorting features instead of relying on the default ui-bootstrap options?

Can anyone provide assistance with resolving conflicts I am experiencing while using ui-bootstrap? ...

Adjustable height for Divs placed between stationary Divs

As a beginner, I have a question that may seem simple to some. I want to create a layout with fixed divs at the top and bottom, but a flexible one in between. To help explain, I've created a sketch. If anyone could provide me with a starting point, I ...

Is there a way to apply a setTimeout to a <div> element upon the first click, but not on subsequent clicks?

Check out the fiddle I've created: http://jsfiddle.net/dkarasinski/dj2nqy9c/1/ This is the basic code. I need assistance with a functionality where clicking on a black box opens a black background and then after 500ms a red box appears. I want the ...