advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

reneolivo on 06/24/08


Tagged

css input text corner round


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

bumz
jonhenshaw


Text Input with rounded corners

Published in: HTML 

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

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).

Plain TextExpand 
  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>

Report this snippet 

You need to login to post a comment.