Cool Text Box Like Android Style
Make Android style text box using CSS3
<div class="holder"> <input type="text" placeholder="First Name" /> <div class="mask-left"></div> <div class="mask-right"></div> <div class="mask-top"></div> </div> <div class="holder"> <input type="text" placeholder="Last Name" /> <div class="mask-left"></div> <div class="mask-right"></div> <div class="mask-top"></div> </div> <div class="holder"> <input type="text" placeholder="Email *" required="required" /> <div class="mask-left"></div> <div class="mask-right"></div> <div class="mask-top"></div> </div>
.holder{border:2px solid gray;height:30px;width:200px;position:relative;color:gray;margin:10px} div.holder:hover{border:2px solid #33b5e5} .holder input[type=text]{height:28px;border:0;width:95%;font-weight:700;outline:none;color:gray;font-size:18px;padding-left:5px;padding-right:5px} .holder input[type=text]:focus{color:#000} .holder input[type=text]:focus[required=required]{background-color:#f1d1d1} .holder .mask-left{position:absolute;top:-2px;left:-2px;width:2px;height:80%;background-color:#fff} .holder .mask-right{position:absolute;top:-2px;right:-2px;width:2px;height:80%;background-color:#fff} .holder .mask-top{position:absolute;top:-2px;left:0;width:100%;height:2px;background-color:#fff}DEMO
Cool Text Box Like Android Style
Reviewed by Bhaumik Patel
on
7:30 AM
Rating: