I am looking to switch the input border-bottom color to blue when the input field is focused or has valid content

Can someone help me change the border bottom color of my input to blue in the following HTML code:

 .inputBox input:focus ~ input,
       .inputBox input:valid ~ input{
          border-bottom: 1px solid #0000cd;
      }
<div class="inputBox">
           <input type="text" name="name" id="name" autocomplete="off" required autofocus>
           <label class="noselect" for="name"> <i class="fas fa-user"></i> Name :</label>
      </div>

Also, how can I achieve the same effect for my label element?

This is my first time asking a question and I hope I have provided enough information. Thank you in advance!

htmlcss

Answer №1

To display a blue bottom border

  .inputBox input:focus,
  .inputBox input:valid {
    border-bottom: 2px solid #0000cd;
    outline: none;
  }

If you want to show only the blue border

  .inputBox input:focus,
  .inputBox input:valid {
      border-color: transparent;
      border-bottom: 2px solid #0000cd;
      outline: none;
  }


.inputBox input:focus,
.inputBox input:valid {
    border-color: transparent;
    border-bottom: 2px solid #0000cd;
    outline: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<div class="inputBox">
  <input type="text" name="name" id="name" autocomplete="off" required autofocus>
  <label class="noselect" for="name"> <i class="fas fa-user"></i> Name :</label>
</div>

Answer №2

Eliminate the use of the sibling selector ("~ input") as it targets inputs that come after ".inputBox input:focus".

.inputBox input:focus,
 .inputBox input:valid{
      border-bottom: 1px solid #0000cd;
 }

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

One way to display a div's inner HTML as its background is to apply a CSS rule

Help needed! <div class="container">red</div> <div class="container">green</div> <div class="container">#eeeeee</div> I am trying to dynamically set background colors for multiple divs based on their inner HTML co ...

javascripthtmlcss

Retrieving raw PCM data from webAudio / mozAudio APIs

I have been exploring ways to store the output from the webAudio API for future reference. It seems that capturing PCM data and saving it as a file might meet my needs. I am curious to know if the webAudio or mozAudio APIs have built-in functionality for ...

javascripthtmlweb-audio-api

Implement FluentUI Progress Component as the New Style in Blazor

Looking for a solution to remove the track from the FluentUI Progress bar, but limited to using only this library. Unable to consider alternatives. Tried applying CSS in my application to override the default style, but it seems any modifications to the c ...

c#cssblazorfluent-ui

Tips for maintaining a consistent height for elements in HTML

As the content of td increases, the height of th also increases. How can we ensure a fixed height for th. This is the HTML code: <table id="depts"> <tr> <th>Topic Title</th> <th><a href="create.php?id= ...

javascriptjqueryhtmlcss

Color-matching cells must be positioned in the same column within the gridbox consecutively

In my current project, I am dealing with a large number of sections. Each section contains one or two rows with columns ranging from 2 to 15, all of equal width. The cells of the same color are placed in the same column, and the layout looks like this: ht ...

htmlcssflexboxgrid-layout

What is the highest image size that desktop Chrome can accommodate?

Let's delve into a specific scenario amidst the vast possibilities. Assume the following technical specifications: Browser: Chrome Latest (Desktop) Hardware: Windows Standard PC with default Intel Graphics card Ram: 8GB Processor: i7 @ 3.40 GHz The ...

javascripthtmlcssimagegoogle-chrome

When using ContentEditable in Firefox, it generates double line breaks instead of a single one

Noticed an interesting issue with div contenteditable where Firefox is interpreting 1 newline as 2 newlines. Is this a bug or am I overlooking something? Test it out in the example below by typing: Hello World within the contenteditable. When accessi ...

htmlfirefoxcontenteditable

Embarking on the journey of nesting components within styled-components

Check out these custom components I created: <UserImg imgUrl={userPhoto}> <DropDown> <div onClick={handleAuth}>Sign Out</div> </DropDown> </UserImg> const DropDown = styled.div` letter-spacing: 0.2em; positi ...

cssreactjsstyled-components

Tags that adhere to W3C compliance for struts

I'm facing an issue with a web page created using struts tag libraries. When attempting to validate the page on w3c.org, all the struts tags are showing up as undefined. For example, <html:button> appears as undefined. The DOCTYPE I used is: &l ...

htmlstrutsw3c

What causes the default styling of a browser user agent to be altered when a background image is added to an input button?

Take a look at this example: http://jsfiddle.net/eJSGn/ input{ padding-left: 20px; } input:last-of-type{ background: url(http://skiorboard.com/wp-content/uploads/2014/03/search.png) no-repeat; background-size:15px 15px; } <in ...

htmlcss

Unable to retrieve a value after deactivating a Div element

I have created a web page using MVC Razor. On this page, I included a div element with the following structure: <div class="row" id="DivDisableForView"> <div class="col-md-4"> <label for="" class="control-label" ...

javascriptjqueryhtmlcssasp.net-mvc-4

Utilize ngModel within the <p> element in Angular 8

Here is some HTML code for displaying card information: <div class="col-md-4" *ngFor="let card of allCards"> <p class="card-text">Card Color: {{card.color}}</p> <button type="button" class=" ...

htmlangular

What is causing Microsoft Edge to highlight this span and behave as though it's a hyperlink?

I am currently in the process of redesigning a website, and I've encountered an issue with the header markup. While the design looks fine on most browsers, it behaves strangely in Microsoft Edge on Windows 10. The phone number in the header is inexpli ...

htmlcssbootstrap-4

In Selenium with Python, leverage CSS selectors to target specifically two classes

Imagine you have an HTML structure like this: <div class="first second"> Correct! </div> <div class="first second third fourth"> Incorrect! </div> <div class="first second"> Correct! & ...

pythoncssseleniumclassclassname

Is there a way to reveal the full contents of a cell when hovering the mouse, even if it has overflow hidden?

I am facing an issue with tables that contain long strings as values. Is there a way to display the entire content of a table cell if the overflowing content is hidden? I thought about expanding the cell while overlapping adjacent cells without displacing ...

htmlcss

Using Sass to create unique breakpoints for media queries based on the body class

I am currently in the process of creating a series of web pages that will be accessed from various websites, each with its unique content template. Even though these pages are very similar, they require different media query breakpoints based on the specif ...

htmlcsssassresponsive-designscss-mixins

Is it possible to have the website show up at a default size of 90% on the display

My preference is for my website to appear at 90% instead of 100%. This seems to be a common occurrence for me. Is there a way to have it default to this appearance? ...

css

Exploring the possibilities in Bootstrap 5.3: Modifying the maximum width of an individual tooltip

Is there a way to modify the maximum width of a specific Bootstrap Tooltip without affecting the others? I do not utilize Sass or SCSS, and have attempted various methods outlined in the documentation: tooltip-max-width="300px" bs-tooltip-max-wid ...

javascriptcssbootstrap-5

Is it possible for me to generate HTML using JavaScript?

Below is the javascript code I have written, saved as create.js: var stuff = document.querySelector(".stuff"); var item = document.createElement('div'); item.className = 'item'; stuff.appendChild(item); This is the corresponding HT ...

javascripthtmlcssdom

Exploring the process of assigning responses to questions within my software program

I am looking to display my question choices as radio buttons in a modal window. I have tried several solutions without success. Here is my question module: import questions from "./Data"; const QuestionModel = () => { return ( <div cl ...

javascripthtmlreactjs