Android Input box using CSS | Android textbox

Views:
63

Now UI of any website become key point for success. Companies always try to give new looks to their websites. Since Google has launched its material design. Now companies using to replicate their design.

New input design of material design is very impressive and google using it in same way on web and smartphone. But using moduler CSS is typical. In current article we will learn how to create that design.

<div class="input-group">hello how are you</div>

CSS Code

.input-group{position: relative; border-collapse: separate; width: 300px; height: 25px; background: #fff; border: solid 1px #000; line-height: 30px; padding: 3px; font-size: 20px;}
.input-group:before{content:" "; top:-1px; position:absolute; right:-1px; bottom:10px; z-index:1; border:solid 1px #fff; border-bottom:none; left: -1px;}

 

 

Comments Your Suggestions