Styling input groups with box shadows in Bootstrap 4

One issue I am encountering is the focus shadow that appears when the input text is focused. My goal is to have both the text input and the right button display a focus border.

To illustrate this problem, I have created a JSfiddle: http://jsfiddle.net/a5upvc82/3/

In the example, you can observe that the box shadow does not show between the text input and the right append button when the input is focused. How can this be resolved? It seems that the issue lies within this section of the code:

&:focus + .input-group-append .btn {
    border-color: #20adc1;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #21dff3;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #21dff3;
}

What could be causing this error?

csstwitter-bootstrapsassbootstrap-4

Answer №1

Don't forget to include the same code for the input field:

&:focus{
  border-color: #20adc1;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #21dff3;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #21dff3;
}

Answer №2

It's quite possible that your shadow effect is being obscured by another element on the page. One solution could be to adjust the z-index property of the element where you want the shadows to be visible.

z-index: 1000;

Answer №3

To differentiate between adding an addon at the end or the beginning, you can implement the following:

.input-group {
    .form-control {
        &.has-group-append {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;

            & ~ .input-group-append {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            &:focus {
                border-right: none !important;
                box-shadow: -0.1rem -0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), -0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), -0.1rem 0 0.1rem 0.1rem rgba(0, 123, 255, 0.25);

                & ~ .input-group-append {
                    border-color: #80bdff;
                    border-left: none !important;
                    outline: 0;
                    box-shadow: 0.1rem -0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), 0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), 0.1rem 0 0.1rem 0.1rem rgba(0, 123, 255, 0.25);
                }
            }
        }

        &.has-group-prepend {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;

            & ~ .input-group-prepend {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            &:focus {
                border-left: none !important;
                box-shadow: 0.1rem -0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), 0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), 0.1rem 0 0.1rem 0.1rem rgba(0, 123, 255, 0.25);

                & ~ .input-group-prepend {
                    border-color: #80bdff;
                    border-right: none !important;
                    outline: 0;
                    box-shadow: -0.1rem -0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), -0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), -0.1rem 0 0.1rem 0.1rem rgba(0, 123, 255, 0.25);
                }
            }
        }
    }
}

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

What is preventing me from choosing the complete table?

I am currently working on a method to export tabular data from an HTML page to Excel using DocRaptor. My approach involves using PHP to pass the necessary data through their API for conversion into an Excel Spreadsheet. However, I have encountered an issu ...

jqueryhtmlcss

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

csstwitter-bootstrapvue.jsconditional-rendering

Safari now fully embraces Flexbox technology

My flexbox code works well in Chrome and Firefox, but unfortunately it's not performing well in Safari. Despite trying various prefixes, I couldn't achieve the same simple order. How can I modify or add to my code so that it functions normally in ...

htmlcssflexbox

Tips for entering the lowest and highest values into the input field

I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...

htmlcss

Creating Seamless, Unified Shape-to-Shape (Containers) Transition with CSS and JavaScript - A Step-by-Step Guide

I am experimenting with creating a unique effect where two rectangular shapes, each containing text and with rounded ends, move towards each other, merge to form a single rounded rectangle as the page is scrolled down, and then separate back when scrolling ...

javascripthtmlcssanimationcss-animations

What is the best way to leverage environment variables in my CSS within the context of Next.js for defining the primary color scheme?

Is there a way to use an environment variable to specify the base color in my CSS? I am working with NEXTJS. All of my colors are defined as variables in my globals.css: @layer base { :root { ... --primary: #0096d0; --primary-bright: ...

cssnext.jscolorsenvironment-variablescss-variables

Explaining the Usage of Nav-pills in Bootstrap v4

I am looking to align my navigation bar across the width of the div. However, I am currently using Bootstrap v4 and the nav-justify class is not available yet. Below is the code snippet: <ul class="nav nav-pills"> <li class="nav-item"> ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Bootstrap 3 with a dual sidebar layout positioned on the left side

I am currently working on a project where I need to create a fluid layout with a left sidebar. However, now I would like to add an expandable sidebar next to the existing one. Below is an image to illustrate my goal: Initially, the left sidebar contains a ...

jqueryhtmlcsstwitter-bootstrap

Creating movement in an SVG patterned background

Currently in the process of designing a brand new website using NextJS and Tailwind. I am looking to incorporate an infinitely translating background effect that moves towards the bottom right, similar to this example (but with my own unique pattern): htt ...

htmlcssreactjssvgnext.js

The Python Django site is failing to detect and implement CSS updates

Currently, I am in the process of developing a Django website where I have successfully loaded my CSS and HTML files as static resources. In this project, I am utilizing two CSS files: one for Bootstrap and another for my custom styling. However, I encoun ...

pythonhtmlcssdjango

Struggling to align my image in the center while applying a hover effect using CSS

Hey there, I'm having an issue centering my image when I add instructions for it to tilt on mouseover. If I take out the 'tilt pic' div, the image centers just fine. Can anyone help me identify what I might be doing wrong? Thanks in advance! ...

javascripthtmlcssweb

Responsive design parameters

After creating a media query specifically for phones, I realized that I needed one for desktop as well. @media screen and (max-device-width: 480px), screen and (max-width: 480px) { ...css here... body {width:50%;} However, when I attempted to add a sim ...

htmlcssmedia-queriestablet

Unusual CSS media queries behavior

During my project work, I faced a puzzling issue which can be illustrated with the following example: Here is the sample CSS code: *, *::after, *::before { box-sizing: border-box; margin: 0; border: 0; } @media only screen and (max-width ...

htmlcssmedia-queries

Ways to define the background color of a form group

I am trying to customize the background color of a form-group element. To illustrate my point, take a look at the image below In the image above, I have highlighted the div in question and I want to change its background color from within the form-group. ...

htmlcsstwitter-bootstrap-3

React Transition for Mui Menu

I'm having trouble implementing a Mui menu on my website and adding a transition effect from the right side. Here is the code I have tried: <Menu transitionDuration={1} open={Open} onClose={Close} MenuListProps={} className="nav"> ...

cssreactjsmaterial-uimenu

The navigation bar seems to be missing in action

I am currently working on a project on Codepen, and I am trying to create a navbar with a dark background color and my name in a light color. However, I am facing issues as it is not displaying as expected. I followed the Bootstrap 4.0 guide available onli ...

htmlbootstrap-4

Understanding fluid design concept

Check out this example. I've noticed that when resizing the viewport, the font size within the .main class increases while there is no change in the .aside class. Can someone help shed light on this for me? Thank you in advance! ...

cssliquid-layout

What could be the reason for the child element not occupying the full height of its parent container?

* { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 50px; } .navbar { display: flex; align-items: center; justify-content: center; color: darkgreen; font-family: 'Vollkorn', serif; font-size: 1.2rem; font-w ...

javascripthtmlcss

PHP Unable to Locate the header.html File Within the Specified Directory

Currently, I am facing an issue while trying to use PHP to incorporate the same header, navigation, and footer elements on all my website pages. The problem arises when the .php file fails to recognize the header.html file for an include("/header.html") op ...

phphtmlcss

Is it possible to have a full-width thumbnail navigator in a full-width slider container with Jssor Slider?

I apologize if this topic has already been discussed, In a responsive full-width slider container, I am utilizing thumbnail navigator 03 with the scaling option disabled. Is it feasible to have a fixed-height, but fully (100%) width thumbnail navigator t ...

jqueryhtmlcssjssor