https://i.sstatic.net/A0nUt.png
I am looking to create an input design that changes based on the user's action. When the label is clicked, a violet line should appear. If the input is successful, a green line appears below the label. And for errors, a red line should show up below the input field. I'm hoping to achieve this effect using HTML and CSS.
This example demonstrates a basic implementation.
input[type="text"] {
outline: none;
background: transparent;
border: none;
border-bottom: 1px solid gray;
margin: 5px 15px;
line-height: 1.4em;
}
.has-success input:focus, .has-success input:active {
border-bottom: 1px solid green;
color: green;
}
.has-error input:focus, .has-error input:active {
border-bottom: 1px solid red;
color: red;
}<div class="has-success">
<input type="text" value="success">
</div>
<div class="has-error">
<input type="text" value="error">
</div>If you want to achieve this using only HTML and CSS, there is a solution available.
You may be able to refine the code further, but here's a brief concept for you to consider.
HTML
<div class="wrapper">
<input id="name" type="text" placeholder="Username" />
<label for="name"></label>
</div>
CSS
.wrapper {
position: relative;
width: 200px;
}
input {
width: 100%;
background: none;
padding: 10px;
border: none;
outline: none;
margin-top: 10px;
}
label {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: rgba(0, 0, 0, 0.4);
}
label:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background: rgba(0, 0, 0, 0.8);
transition: 0.4s;
}
input:focus ~ label:after {
width: 100%;
}
Demo
Material Inputs with a floating Label
If you're interested in adding the feature of floating labels, check out this enhanced version.
I have retained the HTML structure as similar to the original idea as possible. After some trial and error, I managed to make it work by adjusting the structure slightly. I removed the placeholder tag from the input and instead added a data attribute on the parent div called placeholder. This attribute is necessary for the upward swipe effect when focusing on the input. Additionally, a bit of JavaScript is required to apply a class to the parent element.
HTML
<div class="wrapper" data-placeholder="Username">
<input id="name" type="text" />
<label for="name"></label>
</div>
CSS
.wrapper {
position: relative;
width: 200px;
}
input {
width: 100%;
background: none;
padding: 10px;
border: none;
outline: none;
}
label {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: rgba(0, 0, 0, 0.4);
}
label:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background: rgba(0, 0, 0, 0.8);
transition: 0.4s;
}
input:focus ~ label:after {
width: 100%;
}
.wrapper:before {
content: attr(data-placeholder);
position: relative;
top: 30px;
left: 10px;
color: rgba(0, 0, 0, 0.4);
transition: 0.3s;
z-index: -1;
}
.wrapper.clicked:before {
color: #000;
top: 0;
left: 0;
}
.wrapper.clicked.filled:before {
color: rgba(0,0,0,0.4);
}
jQuery
$("input").focus(function() {
$(this).parent().addClass("clicked");
if ($(this).val().length > 0) {
$(this).parent().removeClass("filled");
}
});
$("input").blur(function() {
if ($(this).val().length > 0) {
$(this).parent().addClass("filled");
} else {
$(this).parent().removeClass("clicked filled");
}
});
Demo
Are pug/jade and sass compatible with react? I enjoy organizing my code by separating files, and the functionality that sass and pug provide is great for this purpose. Is there a way to integrate pug and sass into a react project? Pug example: doctype ...
I'm currently working on building my very first single-page website. If you want to check out the jsfiddle for it, here's the link: http://jsfiddle.net/dgfhjxLt/ The main issue I'm facing is related to the first div section. When a user sc ...
Is there a way to replace numbers with unique text of my own choosing? For example, instead of 1., 2., 3., I would like to use Bla, Blabla, Blablabla. https://i.sstatic.net/kf0p4.jpg <style> #menu2 { width: 320px; } #menu2 ol { font-style: talic; f ...
When sending files as form data along with some fields using an http post request in angular.js and receiving file in app.post in node.js, the performance is inconsistent. While local testing shows a fast upload speed of 500 mb/sec with formidable, on the ...
I am facing a challenge with a GridView within a div wrapper. The row headers along the left side need to always be visible. So far, this setup is working fine. However, I need the wrapper to have a variable width to adjust to the browser size. Although I ...
Initially, I developed a web application using HTML, CSS, and JavaScript. Later on, I was requested to recreate it using Bootstrap as well. While I managed to complete the task successfully, I encountered an issue where toggle buttons in the web app revert ...
I have a simple question, I have developed an app that retrieves data from a backend server, Now, the app needs to be accessed and edited by multiple users simultaneously while ensuring that all changes made to the list are reflected in real-time for ever ...
I am looking to incorporate Bootstrap tags into my HTML file in order to display my menu items. However, I want to avoid having the default navbar highlight box and hamburger icon appear when users visit my site using a tablet or mobile device. <nav cl ...
I have a list of product partners with a "Know More" link that opens a modal. I'm trying to figure out the best way to pass props to the modal in order to display the correct partner's information. Here is the code snippet related to this functi ...
Looking to perfectly center this modal in the middle of the screen with some margin all around. However, struggling to apply margin specifically to the top and bottom! export function Modal() { return ( <div className="fixed inset-0 z-[60] ...
I'm currently attempting to retrieve the file content of an HTML rendering from a specific URL. Below is the code I am utilizing, which consistently results in an error: $.ajax({ type: 'POST', url: 'http://www.withhold ...
Whenever I try to run the following code snippet, I encounter an error: const Stack = createStackNavigator(); I have made sure that all the necessary dependencies are installed, but still, I get the following error message: "undefined is not an object (e ...
Here is the code snippet that controls the textarea in my chat application: <div class="chat"> <div class="messages"></div> <textarea class="entry" name="entry" placeholder="Welcome to the Chat. Enter your message here!">&l ...
I'm currently working on a project and have this pen which is just a snippet of it. In this snippet, I am trying to hide a div when it gets transformed off to the left. The elements involved are .fixed-strip for hiding overflowed content and .strip as ...
Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input? .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-y-0 { top: ...
Hey there! I'm currently trying to implement a modal popup in react-bootstrap, but I keep running into an error that says "Props not defined". I followed the instructions from the react-bootstrap documentation, but I can't seem to figure out what ...
Having this particular HTML element below: <a class="btn-modal" data-modal-window-id="category-add-modal" href="#" data-mode="edit" data-content="{"category_id":16,"category_name_en":"Food",&quo ...
My website is built using React and react-strap. I set up my .header-overlay to cover the entire background within the .header. However, due to the presence of the .navbar, the .header-overlay extends beyond the boundaries of the .header vertically. I tho ...
I attempted to display data from a JSON file on an HTML page using jQuery / Javascript. However, each time I load the page, it remains blank. Below is the code snippet: index.html <!DOCTYPE html> <html> <head> <meta conten ...
I've been working on integrating a form into a modal for the past week, but I can't seem to pinpoint what I'm doing wrong. The form itself is straightforward - it allows users to send an email directly to me. Initially, my approach involved ...