0

I'm cuztomizing Bootstrap with their given source code and I came here to ask how to make Bootstrap's input boxes to look and function just like the Material Design Lite's textfield component.

So why not use MDL then?

The two frameworks are great in terms of design but I prefer to use Bootstrap for its simplicity, while MDL makes a long coding which I dislike.

Why not use a theme then?

I'm customizing Bootstrap myself so I will not be needing a theme here. But instead, this project I'm making will be inspired by the works of those devs.

All I currently have is the base style of the input boxes (my demo is here). What I want to achive is the floating labels that acts as a placeholder and the border-bottom color that glows from the middle to the left and right (similar to this question).

I thought I found the solution

I've searched a lot on the internet relevant to the topic and claimed to have the answer to my question but I prefer not to use it for some reasons. I've found them from this tutorial site and the similar implementation for Bootstrap from this CodePen demo.

The reason is:

  • You have to add two <span> element for the border-bottom color animation to work which I don't like.
  • A bug for <input type="email"> that if the required characters are not present, the floating label will return as a placeholder and since it's absolutely possitioned, it surpasses the present texts on the field.

I've made a demo of it to let you see what is actually happening.

Just having thoughts

Fez Vrasta's theme for Bootstrap has achieved all this, but I don't know which codes are used from the source code. If anyone knew of it please make a sample demo cause it is actually what I want to achieve.

CSS background-image and gradient, :before and :after states with transition and/or animation is what I'm expecting for this but I don't know how. I am also aware of using JavaScript for this but although I've studied Java programming, I know less about JavaScripting.

I've stated it all here so please don't give a simple answer, I need a real code from a kind-hearted person.

Thank you.

Community
  • 1
  • 1
Chain Trap
  • 130
  • 1
  • 12
  • have you looked at [http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html#forms](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html#forms) ? – Arpit Vasani Aug 16 '16 at 05:16
  • @ArpitVasani Yes I already have that link on my question. – Chain Trap Aug 16 '16 at 05:19

0 Answers0