How to create material design input form using css and bootstrap

0 votes

I want to design the following material design input form using CSS and bootstrap. The following code is what I am currently using. But it doesn't provide the exact result I want.

HTML CODE :

<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">
    a <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>


But I want something like this design :

enter image description here

Jun 9, 2022 in CSS by Edureka
• 13,620 points
2,231 views

1 answer to this question.

0 votes

Try with this code.

HTML:

  <div class="main_div">
  <div class="group">
      <input type="text" required="required"/>
      <label>Name</label>
    </div>
</div>

CSS:

.main_div{
    padding: 30px;
}
input,
textarea {
    background: none;
    color: #c6c6c6;
    font-size: 18px;
    padding: 10px 10px 10px 15px;
    display: block;
    width: 320px;
    border: none;
    border-radius: 10px;
    border: 1px solid #c6c6c6;
}
input:hover{
    border: 3px solid black;
}
input:focus,
textarea:focus {
    outline: none;
    border: 3px solid black;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
    top: -5px;
    font-size: 12px;
    color: #000;
    left: 11px;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
    width: 320px;
}

input[type="password"] {
    letter-spacing: 0.3em;
}
.group{
    position: relative;
}
label {
    color: #c6c6c6;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 12px;
    transition: 300ms ease all;
    background-color: #fff;
    padding: 0 2px;
}
answered Jun 21, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
0 answers

How to make a back-to-top button using CSS and HTML only?

I want to scroll down and up ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
341 views
0 votes
1 answer

How to include bootstrap css and js in reactjs app?

To begin, we will use npm to ...READ MORE

answered Jul 4, 2022 in CSS by Edureka
• 320 points
293 views
0 votes
1 answer

How to make 3 vertical dots using CSS?

Try the following entire source code for ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
2,791 views
0 votes
1 answer

How to insert spaces/tabs in text using HTML/CSS

For spaces, use &nbsp;, for (less than, ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
391 views
0 votes
1 answer

How to implement a dynamic bootstrap 4 accordion, using Jquery

With this you can add dynamic accordion ...READ MORE

answered Jun 7, 2022 in JQuery by Edureka
• 13,670 points
3,525 views
0 votes
0 answers

How to show message in model body if bootstrap model have no data in jquery

I'm trying to display a text message ...READ MORE

Jul 29, 2022 in Web Development by gaurav
• 23,260 points
615 views
0 votes
0 answers

what do css classes like my-2, my-lg-0, mr-sm-2 do in bootstrap 4?

I've read through other queries and the ...READ MORE

Aug 18, 2022 in CSS by Edureka
• 13,620 points
1,031 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
9,788 views
0 votes
1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
814 views
0 votes
1 answer

How to hide image broken Icon using only CSS/HTML?

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31, 2022 in CSS by Edureka
• 12,690 points
3,590 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP