Advanced Search

Text Input with rounded corners

/ Published in: HTML
Save to your folder(s)
This HTML/CSS shows how to make text inputs with rounded corners in the most basic way (it doesn't expand according to its width).

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>A nice Text Box</title>
  6. <style>
  7. 	body * {	
  8. 		font-family: Georgia, 'Times New Roman', Times, serif; 
  9. 		font-style: italic;
  10. 	}
  11.  
  12. 	label.rounded {
  13. 		padding-top: 5px;
  14. 		font-weight: bold;
  15. 		color: #555;
  16. 	}
  17.  
  18. 	input.rounded {
  19. 		border: 0;
  20. 		background: url(http://img181.imageshack.us/img181/53/textroundbv8.gif) top left no-repeat; 
  21. 		width: 190px; 
  22. 		height: 25px; 
  23. 		padding: 3px 5px; 
  24. 		font-size: 85%;  
  25. 		color: #399; 
  26. 	}
  27. </style>
  28. </head>
  29.  
  30. <body>
  31. 	<label class="rounded">My Input:</label>
  32. 	<input class="rounded" type="text" value="Some text..." />
  33. </body>
  34. </html>

URL: http://www.809estudio.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.