What is the best way to create a trimmed edge around an input field?

I'm looking to design an input element that has a border which changes when the input is focused.

Here's how I want the inputs to behave:

Input without focus

When the user focuses on the input or fills it out, I want the label to move up and the border to be trimmed so that the label isn't hidden by the border.

Input with focus

I attempted to add a background to the before element of the label, but realized this approach wasn't suitable because the input itself doesn't have a background. Depending on the subpage, there could be a different background color and the result ended up like this:

Input with focus

Input without focus

Can anyone assist me with this challenge?

javascripthtmlcssborder

Answer №1

Here is the code snippet for creating a top border by using two separate elements and adjusting the size of the right element accordingly. This method eliminates the need to worry about the limitations of the background workaround.

let container = document.querySelector('.container');
let inputField = document.querySelector('.input-field');
let textLabel = document.querySelector('.text-label');
let border = document.querySelector('.shrink-border');

inputField.addEventListener("click", () => {
    let space = textLabel.offsetWidth + 14;
  
    container.classList.add('active');
    border.style.width = 'calc(100% - ' + space + 'px)';
})
body {
    background: URL('https://www.example.com/background-image.png')
}

* {
  font-family: sans-serif;
}

.container {
  position: relative;
  width: auto;
  display: inline-block;
}

input {
  border: none;
  padding: 12px;
  border-radius: 10px;
  background: transparent;
  outline: none;
  border: 2px solid #000;
  border-top: none;
  position: relative;
}

.left-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 8px;
  border-radius: 10px 0 0 0;
  border-top: 2px solid #000;
}

.right-corner {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% - 10px);
  height: 8px;
  border-radius: 0 10px 0 0;
  border-top: 2px solid #000;
}

label {
  position: absolute;
  top: 12px;
  left: 12px;
  transition: all ease-in-out .1s;
}

.container.active label {
  transform: translateY(-20px);
}
<div class="container">
  <div class="border-top">
    <div class="left-corner"></div>
    <div class="right-corner shrink-border"></div>
  </div>
  <label class="text-label">example label</label>  
  <input type="text" class="input-field">
</div>

Answer №2

Feel free to experiment with the provided code snippet

HTML

<div class="custom-input">
  <input type="text" required>
  <label>Your Label Placeholder</label>
</div>

CSS

.custom-input {
  position: relative;
}

input {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 10px;
}

input:focus {
    border: 1px solid green;
    background-color:#f2f2f2;
}

label {
  color: #666;
  position: absolute;
  pointer-events: none;
  left: 12px;
  top: 12px;
  transition: 0.3s;
}

input:focus ~ label, 
input:valid ~ label {
  top: -6px;
  left: 12px;
  font-size: 14px;
  color: blue;
  background-color:#f2f2f2;
  padding:0 6px 0 6px;
}

Answer №3

Consider using this method

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 62.5%;
  background:  #FFF;
}

div.center {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.input-section {
  position: relative;
}

div.input-section input {
  font-weight: 500;
  font-size: 1.6rem;
  color: #495055;

  width: 350px;
  padding: 15px 15px;
  border-radius: 1rem;
  border: 2px solid  #D9D9D9;
  outline:none;
}

div.input-section span.placeholder {
  position: absolute;
  margin: 17px 0;
  padding: 0 4px;
  font-family: Roboto, sans-serif;

  color:  #6c757d;

  display: flex;
  align-items: center;

  font-size: 1.6rem;

  top: 0;
  left: 17px;

  transition: all 0.2s;
  transform-origin: 0% 0%;
  background: none;
  pointer-events: none;
}

div.input-section input:valid + span.placeholder,
div.input-section input:focus + span.placeholder {
transform: scale(0.8) translateY(-30px);
background: #fff;
}

div.input-section input:focus{
color: #284B63;
border-color: #284B63;
}

div.input-section input:focus + span.placeholder {
color: #284B63;
}
  <div class="center">  
    <div class="input-section">
      <input type="text" name="input-text" id="input-text" required spellcheck="false">
      <span class="placeholder">
        Placeholder
      </span>
    </div>
  </div>

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

How can I utilize an external file in Node js to output as a response?

I came across a similar inquiry, but I am interested in exploring manual methods. My goal is to achieve this without relying on express or any other external library. var http = require('http'); var server = http.createServer(function(req, res) ...

javascriptjquerynode.jsnpm

Unable to get angular button hold loop to work properly

My goal is to create a button that can be pressed once to execute a single command, but also has the capability to hold the button down and execute the command multiple times while still holding it. I am working with AngularJs (though I don't believe ...

javascriptangularjsbuttononmousedown

Updating a PlaneBufferGeometry in Three.js - Tips and Tricks

I'm currently working on implementing an ocean effect in my Three.js project. I found a helpful example on this website: https://codepen.io/RemiRuc/pen/gJMwOe?fbclid=IwAR2caTQL-AOPE2Gv6x4rzSWBrOmAh2j-raqesOO0XbYQAuSG37imbMszSis var params = { res : ...

javascriptthree.jsplane

Tips for utilizing canReuse and routerOnReuse in Angular 2

I've reviewed the information provided in this link, but I'm still unsure about how to effectively utilize it. My requirement is straightforward—I need to update a parameter in the URL without constantly sending API requests, which are current ...

javascriptangular

Having trouble installing node-sass through npm

Currently, I am attempting to install the SASS compiler node-sass in order to compile SCSS code into CSS code. Despite following an online tutorial and replicating the same steps, I keep encountering errors. npm init --yes : this will generate a json file ...

cssnode.jsjsonsass

Sending simple form information through AJAX to a PHP web service

Attempting to send form data via jQuery and Ajax to a PHP web service (php file) for echoing the results. This is my index.html file <html> <head> <title>PHP web service &amp; AJAX</title> <link rel="stylesheet" type="text/ ...

javascriptphpjqueryhtmlajax

Struggling to extract a substring from a lengthy multi-line string in Swift

After extracting some HTML code and storing it in a string named "html", I needed to retrieve the number of stars from this HTML code. Initially, my approach was to search for the word "stars" within the html string itself. Here's the code snippet I u ...

htmlswiftxcode

Creating a search operation to target a particular element within an array of objects

Struggling with setting up a query that involves an array of objects within a specific index. My Schema includes a field that consists of an array of objects: {userID: ObjectID, someArray: [{foo: "bar"},{bar: "foo"}]} I am interested in retrieving record ...

javascriptmongodbmongoose

Display information from a mysql database table within a selection menu

Currently, I am working on a dropdown menu that should display data from a MySQL table. However, I am facing an issue which is outlined below: In my PHP script, I have approached it in the following manner: <label class="col-form-label" for="formGrou ...

javascriptphpjqueryajaxmysqli

What is the best way to modify an array of objects within component state?

I am currently working on updating a specific property of an object that is stored in an array. Here's a glimpse of my current state: state = { todos: [ { id: '1', title: 'first item, completed: false }, { ...

javascriptarraysreactjsobject

Define the post route methods effectively

I encountered a routing error while working on an application using express.js with node. Despite my best efforts, I am unable to handle post requests properly and consistently receive an HTTP 500 error. Below is the code snippet from my server.js file: v ...

htmlnode.jsexpresspostroutes

Extracting data from XPath results reveals information beyond just the elements themselves

Having trouble using the getElementsByXPath function in CasperJS to return a specific string from an xpath I determined. Despite my efforts, it seems like the function is only returning data for the entire webpage instead of the desired string. var casper ...

javascriptxpathphantomjscasperjsselectors-api

Display an HTML file within a modal in Next.js

Recently, I came across an extensive HTML file that resembles the snippet below: <body lang=EN-US style='word-wrap:break-word'> <div class=WordSection1> <p align=center style='margin-top:0in;margin-right:0in;margin-bottom:1 ...

javascripthtmlcssnext.jsmodal-dialog

Issue with Bootstrap 5 dropdown menu extending beyond the viewport on the right side

The user dropdown in my code is cut off, even though I'm using Bootstrap 5. I came across an older article on stackoverflow suggesting to add .dropdown-menu-left or .dropdown-menu-right to the </ul>, but that didn't solve the issue for me. ...

htmlcsstwitter-bootstrapbootstrap-5

Verify WTForm after dynamic updates to select field options with Jquery

As I work on developing a flask application, I have successfully created a form using WTForms. This form consists of two SelectFields (dropdowns) and a submit button. My goal is to make the dropdowns dynamic - meaning that when the user selects an option f ...

javascriptpythonjqueryflaskflask-wtforms

Using TypeScript and Angular to modify CSS properties

I'm trying to figure out how to change the z-index CSS attribute of the <footer> element when the <select> is open in TypeScript (Angular 10). The current z-index value for the footer is set to 9998;, but I want it to be 0;. This adjustmen ...

htmlcssangulartypescriptfunction

The expected behavior is not displayed when using Async.waterfall within a promise queue

In our software implementation, we have utilized a promise queue feature using the q library. The sequence of functions is structured as follows: PQFn1 -(then)- PQFn2 - .... Within PQFn1, an array of values is passed to a callback function implemented wi ...

javascriptnode.jsqasync.js

Dealing with empty POST request bodies in Node.js Express is a common challenge

In my Node.JS project using Express framework, I am encountering an issue while trying to access the body of a POST request. The POST request is being sent through an HTML form, and upon checking with WireShark, I can see that the request is indeed getting ...

javascripthtmlnode.jsexpresspost

The function within the loop will only execute one time

I am facing an issue with a JavaScript function that is looping through my data. I have another function called inside the loop, but it only executes once on the last index. The code looks like this and I want this function to execute every time. Insid ...

javascriptjqueryajax

Simulating a PubSub publish functionality

I have been trying to follow the instructions provided in this guide on mocking new Function() with Jest to mock PubSub, but unfortunately I am facing some issues. jest.mock('@google-cloud/pubsub', () => jest.fn()) ... const topic = jest.fn( ...

javascriptnode.jstypescriptgoogle-cloud-platformjestjs