Steps to modify the border width upon gaining focus

I am struggling to adjust the border width when my input box is focused. Currently, it has a 1px solid border which changes to a 2px different color solid border upon focus. However, this change in border width is causing the containing div to shift by 1px as well. As a beginner in HTML and CSS, I am seeking assistance to resolve this issue. Thank you for your help.

.contact-input {
  border: 1px solid #707070;
  border-radius: 10px;
  margin-top: 1.5rem;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
  padding: 1.5rem;
}

.contact-label {
  padding-bottom: 2rem;
}

.contact-input input[type="text"] {
  outline: none;
  border: none;
  border-bottom: 1px solid #707070;
  width: 40%;
}

.contact-input input[type="text"]:focus {
  outline: none;
  border-bottom: 2px solid #3AD6B1;
}
<div class="contact-input">
  <div class="contact-label">Name</div>
  <input class="w-50" type="text" placeholder="Your answer">
</div>

javascripthtmlcssinputborder

Answer №1

apply a box-shadow of 1px

.contact-input {
    border: 1px solid #707070;
    border-radius: 10px;
    margin-top: 1.5rem;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 1.5rem;
}
.contact-label {
    padding-bottom: 2rem;
}
.contact-input input[type="text"] {
    outline: none;
    border: none;
    border-bottom: 1px solid #707070;
    width: 40%;
}
.contact-input input[type="text"]:focus {
    outline: none;
    box-shadow:0 1px 0 #3AD6B1;
    border-color:#3AD6B1;
}
<div class="contact-input">
    <div class="contact-label">Name</div>
    <input class="w-50" type="text" placeholder="Your answer">
</div>

Answer №2

To make sure the border of the contacts-input div fits properly, adjust the height accordingly.

.contacts-field {
    border: 1px solid #333;
    border-radius: 8px;
    margin-top: 1rem;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
    padding: 1rem;
    height: 6rem;
}

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

Unexpected behavior when using Async.map in conjunction with async.waterfall

Utilizing Async, I am using async.map() to connect my data array with a function and incorporating async.waterfall() within that function to execute functions in a series. However, the waterfall function is not functioning as anticipated. I have also attem ...

javascriptnode.jsasync.js

When making a POST request with axios, the req.body object appears to be empty. However, when using the 'request' module, the body is populated as expected

Providing some context - My NodeJS server is running on port 3001 and my React application on port 3000. I've configured a proxy in my React application's package.json to redirect all requests to port 3001 - "proxy": "http://localhost:3001" H ...

javascriptnode.jsreactjsexpressaxios

Tips for setting one image as the background for an entire page

Take a look at the web template image linked below: URL - https://ibb.co/cD3iH8 I want to utilize the abstract design image above as the background for an entire page. Please provide guidance on the most effective way to accomplish this task. ...

htmljquerycssuser-interface

The error message "Access-Control-Allow-Origin" header is not present when making an Ajax call to ReactJS localhost

While following the ReactJS tutorial, I set up a local server using the following commands: >npm install -g http-server >http-server -c-1 After successfully starting the local server at http://localhost:8080, I encountered an issue when trying to ...

javascriptajaxnode.jslocalhostreactjs

Utilizing GroupBy in RxJs for an Observable of Objects数组

I am working with entries of type Observable<Event[]>, and they are structured as follows: [{ "_id": 1, "_title": "Test Event 1", "_startDate": "2019-05-29T07:20:00.000Z", "_endDate": "2019-05-29T08:00:00.000Z", "_isAllDay": false }, ...

javascripttypescriptrxjsobservable

Module 'prompt-sync' not found

When attempting to take user input in Node.js using the prompt module, I encountered the following error message: node:internal/modules/cjs/loader:998 throw err; ^ Error: Cannot find module 'prompt-sync' Require stack: - D:\Code\C+ ...

javascriptnode.jsnpmuser-inputnpm-install

What could be the reason that the painting application is not functioning properly on mobile devices?

I am facing an issue with my painting app where it works perfectly on desktop browsers but fails to function on mobile devices. I tried adding event listeners for mobile events, which are understood by mobile devices, but unfortunately, that did not solve ...

javascripthtmlcss

How can you use a single parameter in a JavaScript function to swap the values of two numbers

Here's the challenge I'm facing: I need to create a function that will output 5 when given a(0), and 0 when given a(5). a(0) = 5 a(5) = 0 It should look like this: Hint: Use the following function structure function A(num){} something ...

javascript

The significance of Token Details in Tokbox

I'm currently working on developing a video chat platform that caters to various user roles - some may just observe while others actively participate in calls. I've been exploring the capabilities of the Tokbox Api () which allows metadata to be ...

javascriptnode.jsopentoktokbox

The fixed div width suddenly switches to 100% without warning

I'm struggling with a basic design issue. My goal is to align the purple div next to the yellow div. Both of these divs are nested inside the white div, and the white div is enclosed within the blue div. When I float the yellow and purple divs to the ...

htmlcsscss-float

Eliminate the see-through effect from a logo positioned in a fading container

I created a div with image fading functionality using JavaScript and placed a static SVG logo on top of it. The issue I'm facing is that the logo appears somewhat transparent, allowing the image in the div to show through. Despite adjusting the z-inde ...

jqueryhtmlcsssvg

The ng-click functionality is not functioning as expected within the directive

Take a look at this snippet of my HTML: <section ng-controller="GalleryController as gallery"> <nav footer-directive></nav> </section> This is the GalleryController I'm using: angular .module('myapp') ...

javascriptangularjs

Ensure the filelist resets each time the bootstrap-modal is hidden or closed

Context I am in the process of developing a form where users can input data and upload an image file. The information entered into the form, along with the file name, is stored in a MySQL database. To style the website, I am utilizing Bootstrap. When a u ...

jqueryhtmlbootstrap-modalfilelist

Cross-browser compatibility issues preventing CSS button effects from functioning properly

Experiencing some challenges with CSS Button effects not functioning consistently across different browsers. The display is satisfactory in Chrome, but not in Firefox. Struggling to pinpoint the source of the issue. Here is my current setup: Fiddle a ...

htmlcssbuttoncross-browser

Do we really need to create our own action creators in Redux Toolkit?

As I delve into implementing the redux toolkit in my react projects, I've come up with a structure for writing slices using redux-thunk to handle API requests. import { createSlice } from "@reduxjs/toolkit"; import axios from "axios&quo ...

javascriptreactjsreduxfrontendredux-toolkit

Executing numerous GET requests with varying parameters in AngularJS

Update: My apologies to those who answered, it turns out that the code was correct, but requests were being intercepted and losing all parameters. I am attempting to send repeated HTTP GET requests to a REST API based on the response, using the solution I ...

javascriptangularjs

Javascript malfunctioning - exhausted all troubleshooting options

My JavaScript code consists of a single line, but I keep encountering the "getElementById null" error. document.getElementById("menu-background").style.left = "0"; HTML: <html> <head> <title></title> <link rel="style ...

javascripthtmlcss

issue with non-existent value in v-for loop when using functional template refs

Scenario I am currently developing a personalized filtering feature. This feature allows users to add n filters that are shown using a v-for loop in the template. Users have the ability to modify input values and remove filters as needed. Challenge Issue ...

javascriptvue.jsdomvuejs3vue-composition-api

Guide to retrieving account information from a MySQL database

I am currently developing a web application utilizing a three-tier architecture with express and docker. I am integrating mysql as the database to store user accounts. Below is my initialize-database.sql file: CREATE TABLE accounts( personId INT NOT N ...

javascriptmysqlnode.jsexpress

Issue with Vue2: DIV does not adjust height when using v-for loop

I have a div set up like: <div class="pt-4"> <h5>Genres:</h5> <div class="inline-block float-left" v-for="(genre, index) in moreData.genres" :key="index"> <span v-if="index < ...

cssvue.js