Enhance the usability of input-group-addon elements in Bootstrap by incorporating focus and validation states, rather than focusing

When using Bootstrap, focusing on an input activates a blue border and box shadow to show where the user's attention is.

If there are validation states such as error, warning, or success, a red, yellow, or green border will be added accordingly.

An interesting quirk occurs when an input-group-addon is placed on the field - the addon does not receive focus, resulting in a peculiar visual effect.

Is there a way to apply focus to the addon as well?

csstwitter-bootstrap-3

Answer №1

Check out the CSS trick I used to achieve this effect

.input-group:focus-within .input-group-prepend .input-group-text,
.form-control:focus ~ .input-group-append .input-group-text {
  border-color: #06f;
}

Answer №2

Regrettably, I wasn't able to find a solution that doesn't involve javascript. However, here's a workaround.

Include this CSS:

.input-group-focus {
  border-radius:4px;
  -webkit-transition: box-shadow ease-in-out .15s;
          transition: box-shadow ease-in-out .15s;
}
.input-group-addon {
  -webkit-transition: border-color ease-in-out .15s;
          transition: border-color ease-in-out .15s;
}
.input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;  
}
.has-error.input-group.input-group-focus,
.has-error .input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483 !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483 !important;
}
.has-warning.input-group.input-group-focus,
.has-warning .input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168 !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168 !important;
}
.has-success .input-group.input-group-focus,
.has-success .input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b !important;
}
.input-group-focus input:focus {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.input-group-focus .input-group-addon {
  border-color: #66afe9 !important;
}
.has-error .input-group-addon {
  border-color: #843534 !important;
}
.has-success .input-group-addon {
  border-color: #2b542c !important;
}
.has-warning .input-group-addon {
  border-color: #66512c !important;
}

The !important declarations may or may not be required for your situation, so I opted to keep them. I believe there isn't a scenario where anything is more crucial than your focus state, hence it should be fine.

Here is the corresponding JavaScript code (utilizes jQuery):

$(document).ready(function() {
    $(".input-group > input").focus(function(e){
        $(this).parent().addClass("input-group-focus");
    }).blur(function(e){
        $(this).parent().removeClass("input-group-focus");
    });
});

This method will function whether you assign validation states to the parent .input-group or the parent .form-group.

The end result:

Answer №3

https://i.sstatic.net/hL33x.png

My unique approach involves using Bootstrap 4 to overlay the input-group-addon on top of the input by utilizing absolute positioning and z-index. I have also added some right padding to the input in order to accommodate the addon seamlessly. Below is the SCSS code snippet along with the corresponding markup:

.input-group.input-group-seamless-append {
    > input {
        width: 100%;
        padding-right: 52px;
    }
    > .input-group-append {
        position: absolute;
        right: 1px;
        top: 1px;
        bottom: 1px;
        z-index: 4;
    }
}
<div class="input-group input-group-seamless-append">
    <input autocomplete="off" class="form-control rounded"
        aria-describedby="button-addon"
        [attr.type]="showPassword ? 'text' : 'password'">
    <div class="input-group-append">
        <button type="button" id="button-addon"
            class="btn btn-light shadow-none border-0 bg-transparent text-primary">
            <i class="fa fa-eye" *ngIf="showPassword"
                (click)="showPassword = !showPassword"></i>
            <i class="fa fa-eye-slash" *ngIf="!showPassword"
                (click)="showPassword = !showPassword"></i>
        </button>
    </div>
</div>

To implement this special user experience, simply apply the class input-group-seamless-append to your input-group component to specify where it should be utilized.

If Angular isn't being used, ensure that you remove the (click), *ngIf, and [attr] bindings as they are tailored for toggling password visibility functionality.

Here's a preview of how it looks:

Unfocused:

https://i.sstatic.net/UtrhP.png

Focused:

https://i.sstatic.net/hL33x.png

Answer №4

Currently, I tend to avoid using JQuery and prefer JavaScript solutions because they are easier to support in the long run (open to being corrected :)

In CSS, we can use the + operator to apply rules to the immediate next child selector, or we can use ~ to target any child selector. Unfortunately, there is no parent selector available.

My approach (tested only in Chrome without considering the states like .has-success, .has-errors on .form-group) involves overlaying a modified copy of the .input-group block within itself.

The basic block structure would look something like this:

<div class="form-group">
    <label class="control-label">Input with addons</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" placeholder="placeholder text">
            <div class="input-group-addon">.00</div>
        </div>
    <span class="help-block">Help block</span>
</div>

The modified/duplicated block (inserted right after the input field):

<div class="input-group-overlay">
    <div class="input-group-addon">$</div>
    <span class="form-control"></span>
    <div class="input-group-addon">.00</div>
</div>

The updated block now appears as follows:

<div class="form-group">
    <label class="control-label">Input with addons</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" placeholder="placeholder text">
            <div class="input-group-overlay">
                <div class="input-group-addon">$</div>
                <span class="form-control"></span>
                <div class="input-group-addon">.00</div>
            </div>
            <div class="input-group-addon">.00</div>
        </div>
    <span class="help-block">Help block</span>
</div>

To ensure the top and bottom right radius corners are applied, the block must go before the last input-group-addon if there are appended elements. The CSS below uses the + operator that expects it to be the very next element.

Here's the CSS snippet:

input:focus + .input-group-overlay .input-group-addon {
  border-color: #66afe9;
}

.input-group-overlay {
  position: absolute;
  display: inherit;
  z-index: 1;
  top: 0;
  left: 0;
}

This CSS will add a border to the overlapping child input addons over the parent elements.

As mentioned earlier, this code has been tested only in Chrome. The z-index for the span .form-group may need adjustment for other browsers.

Additionally, you can remove the left and right borders of the input and change the background color of the addons to blend them seamlessly with the input:

.input-group .form-control {
  border-left: 0;
  border-right: 0;
}

.input-group-addon {
  background: #fff;
}

Answer №5

By utilizing bootsrap 4.6, I successfully implemented a border around the input-group-prepend and input-group-append elements using the following CSS snippet:

.was-validated:invalid .input-group-prepend .input-group-text,
.was-validated:invalid .input-group-append .input-group-text 
{
   border-color: red;
}

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

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...

htmlcssbootstrap-4

Harnessing the Power of Material UI to Revolutionize Amplify Theming

I am currently developing a React application with Material-UI and Amplify UI Components. I am looking to customize the Amplify theming. By following the guidance provided on Amplify UI Components Customization, I have been able to override CSS variables ...

cssreactjsmaterial-uiaws-amplify

Using Javascript to deactivate a clickable image upon clicking another image

I have two buttons with alert functions assigned to each. I want the function on the first button to only work when that button is clicked, and not work if the second button has been clicked. Below is the code I've tried, but it's not functioning ...

javascriptjquerycsshtml

step-by-step guide on showcasing and concealing textbox borders

Within a table, I have a column with a text box for users to edit the text as needed. The edited text is properly being saved using the onkeyup event. However, I want to hide the border of the text box after editing, so only the edited text is visible. If ...

htmlcss

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

javascripthtmlcss

CSS layout: The full-width header should align its left margin with the centered content-div

Can someone help me out with a solution to my problem? My page has a 1040px centered div for content, menu, and footer. I want the header image to align with the left margin of the content div and expand towards the right side for higher screen resolutio ...

cssweb-applicationshtmlpositioning

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

javascriptjqueryhtmlcssajax

Having trouble making z-index work on a child div with absolute positioning

I am attempting to design a ribbon with a triangle div positioned below its parent div named Cart. <div class="rectangle"> <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0"> & ...

jqueryhtmlcsstwitter-bootstrap-3css-shapes

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve: My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There&a ...

jquerycsstwitter-bootstrapresponsive-designsass

Ensure that the image within the child div occupies the entire height of the parent div

I'm having a bit of trouble figuring this out and could use some input: There's a parent div with an unspecified height, determined by its content. Inside this parent div are two 'child' elements; however, I want only one to dictate t ...

htmlcssflexbox

Problem of background and shadow blending in CSS

I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the backg ...

firefoxcssshadow

Ideal C++ tool for displaying a non-changing HTML page

I am looking to develop a simple cross-platform C++ project for displaying HTML pages, like an application that showcases help materials. These pages may contain images and styles (CSS embedded in HTML). I am researching the best way to incorporate the fol ...

htmlc++cssqtzooming

Update overall font size to be 62% for a consistent look across the website

Recently, I developed a browser extension that adds an overlay button to the LinkedIn website. Everything was running smoothly until I discovered that LinkedIn uses a global font-size: 62,5% that completely messes up my design.. https://i.stack.imgur.com ...

javascriptcssmaterial-ui

The presence of <!--[if lte IE8]>< ![endif]--> on the website is causing problems with the dropdown

Check out my link: Problem #1: Why does "" appear on the site in Internet Explorer? The markup seems correct, so what is causing this to show up? Problem #2: In Internet Explorer, there is an issue with clicking on subnav items above the jQuery slider wh ...

phphtmlcss

Tips for optimizing the placement of div elements for top advertisements on Amazon's website

I'm looking to overlay some divs on top of Amazon.com ads, similar to the image above. This is part of a personal project where I need to position these divs precisely over the ads. To achieve this effect, I've been using getBoundingClientRect t ...

javascripthtmlcss

How can I achieve a letter-spacing of 0.5 pixels in CSS?

Encountering an issue, I set out to enhance readability by adjusting letter-spacing to 1px. Displeased with the result, I attempted a half pixel spacing of 0.5px but found it ineffective. Subsequently, I experimented with em attributes but failed to accomp ...

cssletter-spacing

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

Can anyone help with this Navber code issue? <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;"> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <a class="navbar-brand" ...

htmlcss

What is the best way to position the top line next to the border?

I've been attempting to create a falling line effect on the left side of the box's border, but I can't seem to figure out what's causing the issue. Below is the code snippet: @import url('https://fonts.googleapis.com/css ...

htmlcss

Centering text both vertically and horizontally over an image using CSS

I've been attempting to center the div banner_title both vertically and horizontally within another div in this way... .box { text-align: center; } .banner_title { font-size: 32px; position: absolute; top: 50%; width: 100%; } .banner_titl ...

htmlcss

Issues with styling classes using global SCSS in React are causing unexpected behavior

Currently, I am working on a React project that includes the use of SASS for styling purposes. While implementing modular CSS in my components, I have encountered an issue with applying styles from a main.scss file in my Layout.js component. The unique a ...

cssreactjssassselectornext.js