Advanced Search

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

Expand | Embed | Plain Text

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.