Adjust the border color of the <input> element when it is clicked on

I'm currently working on a login screen for my next.js application and I've encountered an issue where the border color changes to a mixture of white and blue when I select an input field.

https://i.stack.imgur.com/R2yKa.png

I attempted to resolve this problem by using the following code snippet:

.input:focus {
  border: 5px solid #f23;
}

However, instead of changing the border color, it produced unexpected results:

https://i.stack.imgur.com/9DVsT.png

Can anyone advise me on how to successfully change the border color?

<input type="text" className={styles.input} style={{ marginBottom: 10 }} autoComplete="off" autoCorrect="off" autoCapitalize="off" aria-required="true" spellCheck="false" placeholder="Email" ></input>
htmlcssnext.js

Answer №1

It seems that the element you're observing is probably an outline: https://www.w3schools.com/css/css_outline.asp

You can either remove the outline using outline: none; and utilize the border property, or customize the outline like this:

.input:focus {
  outline: 5px solid #f23;
}

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

Unable to assign a value to a data attribute using jQuery

For some unknown reason, the code $('element').data('data_attribute_name', 'value'); is not functioning properly in this scenario: Here is the HTML structure: <ul class="main_menu__list" data-scheme="light"> ... </u ...

jqueryhtml

As the user scrolls down, the navigation becomes obscured by the content

Whenever I scroll down on my website at Bradly Spicer, the navigation menu extends and ends up falling behind the content. This is the script I am using: .menu { position: relative; z-index:9999; } .post { background: #fff; border: 1px solid #ddd; font- ...

jqueryhtmlcssresponsive-design

What is the best way to create an oval-shaped background for a div element?

Can someone help me achieve an oval shape for my index page div? I tried using border-radius but the edges are too round for my liking. I am looking for a more specific result See the CSS code below for reference <div class="home-page"></div> ...

htmlcss

Storing data from one file into a different directory in PHP

As a php beginner, I have discovered that the most effective tool for working with MySQL databases and files is php. Currently, I am trying to retrieve a file with the name 'file_name'. <input type=file name="file_name"> and then save th ...

phphtmlfile-upload

Sending various values via a click in an HTML link

Hello, I am attempting to pass multiple values using the HTML onclick function. I am utilizing Javascript to generate a table dynamically. var user = element.UserName; var valuationId = element.ValuationId; $('#ValuationAssignedTable').append(&a ...

javascripthtml

Utilizing functions instead of classes in Next.js custom document when using Styled Components: A step-by-step guide

For my project, I decided to use NextJS along with Styled Components. Upon referring to the documentation provided in the link below, I integrated a custom _document.js file in NextJS to ensure that Styled Components function correctly. Here is the Styled ...

reactjsnext.jsstyled-components

Is there a method in CSS animations that allows for endlessly repeating successive animations in a specified sequence?

While working with CSS animations, I encountered a challenge of making two animations occur successively and repeat infinitely without merging keyframes. Is there a way to achieve this using only CSS? If not, how can I accomplish it using JavaScript? I a ...

javascripthtmlcsscss-animations

Applying Bootstrap Style to an Inline Select Element: A Step-by-Step Guide

Currently working on a page layout using Thymeleaf and Bootstrap 5. I have divided the page into two parts, with this section behaving as desired: <main role="main" class="pb-3"> <br> <p>Post office ex ...

htmlcssthymeleafbootstrap-5

Performing asynchronous operations in React with axios using loops

On the backend, I have a socket set up to handle continuous requests from the server. Now, my goal is to send requests to the backend API continuously until a stop button is clicked. Using a loop for this task is considered bad practice as it never checks ...

javascriptreactjsaxiosnext.jsresponse

Conceal the toolbar element if it is not at the top of the page

I am encountering an issue with my toolbar. When I scroll down, the transparent background of the toolbar disappears and it looks like this: . How can I hide this component when the page is scrolled down and show it again when scrolling back up to the top ...

cssangulartypescriptscroll

Ensure that all content in the table rows remains visible, even in a table with unusually lengthy cells

My HTML table is structured like this: +-------------+-------------+----------+ | Single line | Single line | Very, | | | | very | | | | long | | | | text, | | ...

javascriptjqueryhtmlcss

What criteria do web browsers use to determine the order in which to apply @media queries when there are multiple relevant queries for the device

My website requires adjusting element positioning based on specific resolutions. One example is this media query: @media all and (max-width: 385px) And another one: @media all and (max-width: 500px) The device I am using has a width below 385px, but i ...

cssmedia-queries

An issue occurred when serializing `something` retrieved from the getServerSideProps function on a certain page

Currently, I am in the process of developing a project utilizing next.js. In this particular project, there is a dynamic route that makes use of getServerSideProps. It allows for passing queries to the page with the folder structure set as category/[title] ...

reactjsjsonnext.js

An empty space separating the header and the navigation bar

As a beginner in HTML and CSS, I decided to create a basic website. However, I encountered an issue with the layout - there seems to be a gap between my header image and navigation bar, but I can't figure out what's causing it. HTML <!DOCTYPE ...

htmlcss

Trouble with the div element's change event

Hey there! I'm having trouble with this jQuery code that is supposed to fade in or fade out a div based on its contents. Here is the HTML code: <div class="mainContentWrapper"> sample text </div> And here is the CSS code: div.main ...

javascriptjqueryhtmlcss

What could be causing my div to not appear when using jquery's show function?

I'm dealing with HTML code that looks like this: <div id="answerTypeSection" style="visibility: hidden"> <div class="row"> <div class="col-md-2">adfadfafasdfasdfas</div> </div> <label class="control-label"&g ...

javascriptjqueryhtmlcss

CSS Styled Product Index

Currently, I am working on creating a product catalog using React and CSS. Everything is going smoothly except for the last row of products. The issue with the last row is that it only contains 1 element, and due to the flex-grow: 1 setting, it ends up ta ...

htmlcssreactjs

Accessing an Android device from localhost using a hostname with ever-changing IP addresses

SCENARIO: I am currently running a local webpage on a WAMP server from my computer, which is connected to a wireless network. Additionally, I have an Android tablet also connected to the same network. OBJECTIVE: My goal is to access the local webpage on ...

networkingmobiletcpiphtml

Step-by-step guide on replacing a visible div with a new div when a button is clicked

I have organized my website with links on the left sidebar and matching content in the right sidebar, structured within appropriate div elements. My goal is to display only one div at a time when a user clicks on one of the links located on the left side. ...

jqueryhtmlcss

Preventing div elements from being highlighted when double-clicked

I'm working with a div element that has a background image and I need help figuring out how to disable the highlighting effect when double-clicking on it. Is there a CSS property that can achieve this? ...

cssxhtmltagshighlightingdouble-click