What is the best way to implement the :focus pseudo-class on various identical selectors simultaneously

I am attempting to modify the color of the bottom border when input type number is focused. I have partially succeeded, but the CSS is not being applied to all selectors. Here is the issue:

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

The left side (peso) is not in focus, yet it shares the same selector as Kg. Here is the code: https://jsfiddle.net/snake93/nLdrcv71/1/

input[type=number] {
    color: #666;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dcdcdc !important;
    border-radius: 0px !important;
    background: #fafafa00;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff00 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: .25rem;
    border-width: 0px 0px 1px 0px !important;
    border-radius: 0px !important;
}

.form-control:focus,
.form-control:focus + span {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

.input-group-text:focus {
    background:red !important;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bca3bc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d4d8c5d2f785998e9984">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a3aeaeb5b2b5b3a0b181f4eff0eff0">[email protected]</a>/dist/js/bootstrap.min.js" ></script>

<div class="input-group mb-3">
  <span class="input-group-text">Peso</span>
  <input type="number" class="form-control">
  <span class="input-group-text">Kg</span>
</div>
htmlcssinputbootstrap-4focus

Answer №1

The CSS selector .form-control:focus + span targets only span elements that appear after elements with the .form-control class. An alternative approach is to use .input-group:focus-within span to style child span elements when elements with the .input-group class are in focus.

.form-control:focus,
.input-group:focus-within span {
    color: #00a1ff;
    background-color: #fff0;
    ...

Update: The complete HTML markup has been included to demonstrate the effectiveness of this solution.

input[type=number] {
    color: #666;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dcdcdc !important;
    border-radius: 0px !important;
    background: #fafafa00;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff00 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: .25rem;
    border-width: 0px 0px 1px 0px !important;
    border-radius: 0px !important;
}

.form-control:focus,
.input-group:focus-within span {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

.input-group-text:focus {
    background:red !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368776877">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53303c213613617d6a7d60">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a958a95">[email protected]</a>/dist/js/bootstrap.min.js" ></script>

<div class="input-group mb-3">
  <span class="input-group-text">Peso</span>
  <input type="number" class="form-control">
  <span class="input-group-text">Kg</span>
</div>

Answer №2

Reorder the HTML elements so that "Peso" comes after the 

<input type="number">
tag, utilize the ~ CSS general sibling combinator to target all adjacent siblings, and employ CSS order to adjust the order of the flex children in your stylesheet.

input[type=number] {
    color: #666;
    border-width: 0px 0px 1px 0px !important;
    border-color: #dcdcdc !important;
    border-radius: 0px !important;
    background: #fafafa00;
}

.first-input {
    order: 1;
}

.second-input {
    order: 2;
}

.third-input {
    order: 3;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff00 !important;
    border: 1px solid #dcdcdc !important;
    border-radius: .25rem;
    border-width: 0px 0px 1px 0px !important;
    border-radius: 0px !important;
}

.form-control:focus,
.form-control:focus ~ span {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

.input-group-text:focus {
    background:red !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcfc2c2d9ded9dfccdded98839c839c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e6eaf7e0c5b7abbcabb6">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d322d32">[email protected]</a>/dist/js/bootstrap.min.js" ></script>

<div class="input-group mb-3">
  <input type="number" class="second-input form-control">
  <span class="first-input input-group-text">Peso</span>
  <span class="third-input input-group-text">Kg</span>
</div>

The general sibling combinator (~) separates two selectors and matches all iterations of the second element following the first element (not necessarily immediately), and are children of the same parent element.

Source: MDN

The order CSS property specifies the order to arrange an item in a flex or grid container. Items in a container are arranged by ascending order value and then by their source code order.

Source: MDN

My approach was influenced by Paco Coursey's article CSS Previous Sibling Selector.

Answer №3

To create a toggle effect, simply add a .focused class when the input is in focus or blurred.

Your CSS code should include the following modification with the addition of .focused after the other "+ span" declaration:

.form-control:focus, .form-control:focus + span, .focused {
    color: #00a1ff;
    background-color: #fff0;
    border-color: #00a1ff !important;
    outline: 0;
    box-shadow: none !important;
    border: solid;
    border-width: 0px 0px 2px 0px !important;
}

Additionally, include the provided JavaScript code:

let input = document.getElementsByClassName("form-control")[0];
let firstSpan = document.getElementsByClassName("input-group-text")[0];

input.addEventListener("focus", addClass);
input.addEventListener("blur", removeClass);

function addClass() {
    firstSpan.classList.add("focused");
}

function removeClass() {
    firstSpan.classList.remove("focused");
}

Check out the functioning example here: https://jsfiddle.net/y1h8abnw/39/

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

Displaying the Price of a Product in a Different Location on Your Wordpress Site

I am attempting to display the price of a product within a post using HTML code. My goal is to use $product->get_price(). However, I need a way to specify which product to call by identifying it with its code or something similar. In essence, all I am ...

phphtmlwordpress

Is there a method to adjust the styling of my <header> once the page hits a specific #anchor point?

Seeking some assistance with a website design challenge I am facing. I am currently working on a one-page portfolio site with four #anchor points that serve as "pages". Each div has a height of 100% to fill the entire browser height. The header, which co ...

javascriptjquerycsshtml

Steps for aligning items in a column horizontally in Bootstrap 5

After creating a Grid system with only 2 columns, I placed text in the first column and a carousel in the second. Despite setting a custom size for the carousel image, I'm facing difficulty centering it horizontally within the column. .title-sec { ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Animating drop-right feature in a horizontal navigation menu

I want to design a horizontal menu with an animated effect that activates when hovering over first-level items. Here is the code snippet: .nav { float: right; } .nav ul { list-style: none; padding: 0; margin: 0; } .nav ul li { position: relat ...

css

`Unable to activate Bootstrap dropdown feature`

Having an issue with the dropdown menu on my Bootstrap navbar - when I click it, nothing happens. I've tried various solutions found online, such as moving the <script type="text/javascript" src="js/jquery-3.3.1.min"></script> file to the ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

My website works perfectly in all browsers, except for IE9. After some investigation, I discovered that the issue lies with a jQuery plugin called multilevelpush.js. While it works great on other browsers, it simply won't cooperate with IE9. Upon fur ...

javascriptjqueryhtml

Angular5 causing all divs to have click events at once instead of individually triggered

I am a beginner when it comes to working with Angular and I have encountered an issue. I created a click event on a FAQ page in Angular 5, but the problem is that when I click on one FAQ, they all open up instead of just the targeted one. Here is my TypeS ...

javascripthtmltypescriptangular5

Switching the background image dynamically in Vue.js upon page access

My goal is to update the 'background-image' when the page is accessed. export default { created () { document.getElementsByTagName('html')[0].style.background = "url('../assets/background-blur.png') center" } } //Logi ...

javascriptcssvue.js

Insert, delete, and modify rows within the table

I'm struggling with a JavaScript issue and could use some help. How can I add a new row for all columns with the same properties as the old rows, including a "remove" button for the new row? Is there a way to prevent editing cells that contain b ...

javascripthtml

A guide to eliminating missing tags from HTML code using Asp.net

There have been instances where the HTML code we receive from certain websites does not have proper tag endings, causing issues with our UI. For example: <br /><p>hello the para start here </p> <p>some text and no ending tag As yo ...

c#htmlasp.netregex

Overruled fashion

Here is the HTML code from my custom page: <div class="notes quotes-notification member-savings f-left"> <h2>My Notifications</h2> <ul> <li><b>I need to make some changes in the HTML, different from other pages you have ...

htmlcss

Switch between two AppBars simultaneously while scrolling in Material UI

In my Header.js component, I have two AppBars. The first one is sticky and the second one is not initially visible. As we scroll down, I want the second AppBar to collapse and the first one to stay stickied at the top of the screen. I looked at the Materi ...

javascriptcssreactjsmaterial-uiappbar

What is the best way to dynamically update styleUrls or style properties in Angular?

One of my goals is to give users the ability to customize colors and certain styles within my Angular application. I am thinking about creating a structure like this: Structure: component-one   folder-with-css-files     style-for-component-1-fo ...

cssangularstyled-components

Disable the ability to scroll the background when the lightbox is opened

Currently incorporating Featherlight for a lightbox feature. Encountering an issue where the background remains scrollable when the lightbox is open. Typically, lightboxes require adding a class to the body with overflow:hidden; to resolve this problem. S ...

jquerycssfeatherlight.js

Animation of disappearing blocks covering the entire screen

I am currently working on creating a slider with fading blocks animation similar to the one shown here. The challenge I am facing is making it fullscreen, where the height and width will be variable. This makes using the background-position trick ineffecti ...

javascripthtmlcssanimation

Tips for relocating anchor elements to less desirable locations

My website has an issue with anchor elements appearing too frequently and not in the desired location. I need someone to help fix this so there are only two anchors displayed. After checking my code, it seems like there are not more than the specified num ...

htmlcss

"Optimizing XSL stylesheets by implementing conditional row styles to prevent redundant

Is there a way to display rows that are older than 2 years from today in bold without repeating the code? I know the condition I need, but I'm struggling with avoiding duplicating all the code just for a different style. This is the code I have: & ...

cssxslthtml-tablexslt-1.0

Create a log table specifically for tracking changes made to the drop-down menu

I need to create a Change log table that will track any changes made in the drop-down menu. For instance, I am working on a worksheet with a select menu called Results which includes options like Positive, Negative, Unknown. I want the system to log any ch ...

javascriptjqueryhtmlcss

Optimizing font size and placement with media queries

I am looking to scale some text and position it over an image on mobile devices. <style> #rcontainer { height: 340px; width: 100%; position: relative; } .rtext span { position: absolute; bottom: 130px; font-family: "Geo ...

cssresponsive-designposition

Navigating Checkbox in Active Choice Reactive Reference Parameter on Jenkins

I attempted to configure an active choice reactive reference parameter using the instructions outlined in this guide: Here is the code for the reactive reference parameter: service_tier_map = [ "web": [ ["service_name": "use ...

htmljenkinscheckboxjenkins-plugins