css border bottom on Text input


/ Published in: CSS
Save to your folder(s)

Text input Field with Bottom Border only. Border color change at focus


Copy this code and paste it in your HTML
  1. <style type="text/css">
  2. .style-11 input[type="text"] {
  3. padding: 10px;
  4. transition: border 0.3s;
  5. color: #000;
  6. background-color: #CCC;
  7. border-bottom-width: 2px;
  8. border-top-style: none;
  9. border-right-style: none;
  10. border-bottom-style: solid;
  11. border-left-style: none;
  12. border-bottom-color: #333333;
  13. }
  14. .style-11 input[type="text"]:focus,
  15. .style-11 input[type="text"].focus {
  16. border-bottom-width: 2px;
  17. border-bottom-style: solid;
  18. border-bottom-color: #FFFF00;
  19. }
  20. </style>
  21.  
  22.  
  23. <form id="form1" class="style-11" name="form1" method="post" action="">
  24. <input type="text" name="uline" id="uline" />
  25. </form>

URL: http://abf24.net/testdrive/css.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.