Tips for building a material design input form with CSS and Bootstrap

I am working on creating a material design input form using CSS and Bootstrap. The current code I have is not providing the exact result I desire.

If you want to view the source code, check out this Code Pen Link

Here is the HTML CODE that I am using:

<div class="container">

  <h2>Google Material Design in CSS3<small>Inputs</small></h2>

  <form>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>

  </form>

  <p class="footer">
    Check out this helpful <a href="https://scotch.io/tutorials/css/google-material-design-input-boxes-in-css3" target="_blank">tutorial</a> by <a href="https://scotch.io" target="_blank">scotch.io</a>
  </p>

</div>

However, my desired design looks like this :

https://i.sstatic.net/wSoxc.png

javascripthtmlcssbootstrap-4material-design

Answer №1

To achieve a CSS-only solution, you can utilize a combination of the sibling selector ~ on the label and the :valid pseudo-selector on the input.

body {
  margin: 10px;
}

.form-group>label {
  bottom: 34px;
  left: 15px;
  position: relative;
  background-color: white;
  padding: 0px 5px 0px 5px;
  font-size: 1.1em;
  transition: 0.2s;
  pointer-events: none;
}

.form-control:focus~label {
  bottom: 55px;
}

.form-control:valid~label {
  bottom: 55px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <br>

      <div class="form-group">
        <input type="text" class="form-control" id="usr" required>
        <label for="usr">Name</label>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" id="password" required>
        <label for="usr">Password</label>
      </div>
    </div>
  </div>
</div>

Answer №2

If you are working with Bootstrap 4, it seems like you are looking for a solution within that framework.

To set up the form-group, label, and input elements, follow this markup:

<div class="form-group">
   <label for="usr">Name:</label>
   <input type="text" class="form-control" id="usr">
</div>

Next, apply this CSS to position and style the label:

  1. Position the label relative to its container (form-group).
  2. Specify top and left positions for the label to align over the input field.
  3. Add a white background and padding to the label for a box-like appearance.
.form-group > label {
  top: 18px;
  left: 6px;
  position: relative;
  background-color: white;
  padding: 0px 5px 0px 5px;
  font-size: 0.9em;
}

Here's a JSFiddle link demonstrating the code with Bootstrap 4: http://jsfiddle.net/rw29jot4/

To add animation effects, refer to this updated code in the following JSFiddle link by utilizing click events to move the label: Updated code with animation: http://jsfiddle.net/sedvo037/

EDIT: Please see my response below for a CSS-only solution.

Answer №3

Check out this snippet for guidance.

HTML:

<div class="container">
  <div class="section">
      <input type="email" required="required"/>
      <label>Email</label>
    </div>
</div>

CSS:

.container{
    padding: 20px;
}
input {
    background: none;
    color: #333333;
    font-size: 16px;
    padding: 8px 12px;
    display: block;
    width: 280px;
    border: none;
    border-radius: 5px;
    border: 1px solid #999999;
}
input:hover{
    border: 2px solid black;
}
input:focus {
    outline: none;
    border: 2px solid black;
}
input:focus ~ label,
input:valid ~ label {
    top: -3px;
    font-size: 11px;
    color: #000;
    left: 8px;
}
.group{
    position: relative;
}
label {
    color: #999999;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 12px;
    top: 10px;
    transition: 200ms ease all;
    background-color: #fff;
    padding: 0 2px;
}

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

Overlapping text effect with CSS

Currently, I'm in the process of building a website using HTML5 and CSS3. One particular challenge I've come across is when trying to integrate two CSS images together, with one containing a few lines of text. Let me get straight to the issue at ...

htmlcss

What is the process for assigning the value returned from an Angular HTTP request to ng-bind?

I am trying to retrieve a value from an HTTP request in AngularJS and set it as the result in a variable that is bound to ng-bind. The goal is for the value returned from the HTTP request to be displayed when text is typed into an input field. Below is th ...

javascripthtmljsonangularjshttp

JavaScript array containing objects remains static

I'm facing an issue with a complex array of objects (I will only display the necessary nodes to explain the problem): var arr = [ { json: { doc: { id: 1, atualizacao:{ ...

javascriptarraysjsonobject

The functionality of V-model is hindered when implementing Bootstrap Tokenfield

While working with Vue and Bootstrap Tokenfield, I encountered an issue where v-model was not functioning as expected. Let's say I have the following array: index variant_options 1 aaa 2 sss If I remove index 1, the result of inde ...

javascriptvue.jsbootstrap-tokenfield

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

When trying to display either a confirm or cancel button based on a boolean set in my component.ts, I implemented the following code in my HTML: <mat-dialog-actions class="dialog-actions"> <button class="cancel-btn" ...

javascripthtmlcssangulartypescript

Can you explain the functionality of the Django Form Action?

Often, Django Forms examples lack a specified action. For example: <form method="post"> {% csrf_token %} {{ form.as_p }} <div class="form-actions"> <button type="submit">Send</button> </div> </form> The page source ...

pythondjangohtmldjango-forms

The absence of characters is swiftly replaced by underscores

I have the following PHP code within my input field: <input type="submit" name='<?php echo $row["date"];?>' value="send"> After using var_dump($row["date"]), I found that the data is a string presented as: string '2015-10-03 1 ...

phphtmlforms

Adjusting a model using an input is causing a ValueError

Attempting to enable the user to modify a decimal value named 'amount'. Once the user clicks on 'edit', a decimal field will be displayed. Upon finishing the value change and clicking "done"... An error is thrown: Exception Type: Valu ...

pythonhtmldjango

"Trouble with jQuery: Selecting an image to change isn't

Can someone help me figure out why my simple image change on a dropdown isn't working correctly? You can find the code on this Jsfiddle. Thank you for any assistance! $("#display_avatar").change(function(){ $("img[name=preview]").attr("src", $( ...

jqueryhtmlcss

Sorry, Laravel 8 module form error: The POST request is not allowed on this route. Only GET and HEAD methods are supported

**I'm having trouble understanding routes and how to specify the path. ** web.php - this route is located inside my module named events <?php use Illuminate\Support\Facades\Route; Route::prefix('event')->group(fu ...

phphtmlmodulelaravel-8

"Discover the magic of jQuery: Unveiling the hidden div with one simple CSS visibility change

I want to implement a functionality on my screen where the Previous button is hidden initially and only becomes visible when the user clicks the Next button. I have set the CSS property for the Previous button to hide it by default, but despite using an if ...

javascriptjqueryhtmlcss

Tips for implementing multiple selectors in YUI

Is there a way to use multiple selectors in YUI (YUI 2) similar to jQuery? $('h1, h2, el1, el2, .content, .title').css('color', 'red'); How can I achieve the same in YUI without having to individually add classes using YAHOO ...

javascriptyuiyui2

Replacing the yellow autofill background

After much effort, I have finally discovered the ultimate method to remove autofill styling across all browsers: $('input').each(function() { var $this = $(this); $this.after($this.clone()).remove(); }); However, executing t ...

javascriptcssautofill

Using PHP to make an Ajax call that takes users to an action page when they submit a form

I'm struggling with an ajax call in my PHP code that keeps navigating to the action page instead of staying on the same page and only updating a specific part. Can anyone point out what I might be doing wrong here? <form method="post" id="holderSa ...

javascriptphpjqueryajax

Why won't the Laravel Livewire click function work after the PJAX container refresh?

I am currently using the pjax library in my application, and I recently integrated Livewire. However, I am facing difficulties in making them work together. Specifically, my issue is as follows: In my application, I have a grid displaying products with an ...

javascriptajaxlaravellaravel-livewirepjax

"Implementing form validation and AJAX submission for seamless user interaction

I am seeking a solution to validate my form using ajax and then insert it into the database also utilizing ajax. Although, with the current code, validation messages are displayed, it still performs the insertion. The issue I am encountering seems to be ...

javascriptphpjqueryajaxvalidation

Mastering Backbone - Incorporating JSON information with backbone

I am currently in the initial stages of transitioning my application to the backbone framework. One of the tasks involves handling data that is fetched as JSON from an ajax call. {f1:"f1_value", f2:"f2_value", f3:"f3_value"}, {f1:"f1_value", f2:"f2_value ...

javascriptjsonbackbone.js

Choosing limits or beginning & ending positions of a string in angular js

I'm facing an issue with extracting a substring from a string on my webpage that was developed using MEAN. I am currently selecting the substring by dragging the mouse (ng-mouseup). However, I need to determine the start and end positions or length of ...

javascripthtmlangularjs

Issue with the back-to-top button arises when smooth-scrolling feature is activated

This Back To Top Button code that I discovered online is quite effective on my website. // Defining a variable for the button element. const scrollToTopButton = document.getElementById('js-top'); // Creating a function to display our scroll-to- ...

javascripthtmlcss

Struggling to establish communication between a JQuery Post and WCF due to issues with accepting JSON data

Utilizing JQuery\JavaScript code to interact with a WCF 4 REST service: <script> var serviceUrl = "http://services.example.com/Example/AccountService/rest/json/Login"; var userInfo = { "IsNotEncrypted":true, "Pas ...

javascriptajaxwcfjquery