Skip to main content

How to Transform Input Text using CSS

Getting Bootstrap

For a little design, I've used Bootstrap which is included in the downloadable of this tutorial but if you want, you may download bootstrap using this link.

Creating our Inputs

The following are our inputs where we assign a class to transform them.

  1. <div class="form-group">
  2. <label for="lowercase">Lowercase:</label>
  3. <input type="text" id="lowercase" class="lowercase form-control">
  4. </div>
  5. <div class="form-group">
  6. <label for="uppercase">Uppercase:</label>
  7. <input type="text" id="uppercase" class="uppercase form-control">
  8. </div>
  9. <div class="form-group">
  10. <label for="capitalize">Capitalize:</label>
  11. <input type="text" id="capitalize" class="capitalize form-control">
  12. </div>

Adding the CSS

Next, we add the CSS that transforms the above inputs.

  1. .lowercase{
  2. text-transform: lowercase;
  3. }
  4. .uppercase{
  5. text-transform: uppercase;
  6. }
  7. .capitalize{
  8. text-transform: capitalize;
  9. }


Here's the full html code for this tutorial.

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>How to Transform Input Text using CSS</title>
  4. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  5. <style type="text/css">
  6. .lowercase{
  7. text-transform: lowercase;
  8. }
  9. .uppercase{
  10. text-transform: uppercase;
  11. }
  12. .capitalize{
  13. text-transform: capitalize;
  14. }
  15. </style>
  16. </head>
  17. <div class="container">
  18. <h1 class="page-header text-center">Tranform Input Text</h1>
  19. <div class="row">
  20. <div class="col-sm-4 col-sm-offset-4">
  21. <div class="form-group">
  22. <label for="lowercase">Lowercase:</label>
  23. <input type="text" id="lowercase" class="lowercase form-control">
  24. </div>
  25. <div class="form-group">
  26. <label for="uppercase">Uppercase:</label>
  27. <input type="text" id="uppercase" class="uppercase form-control">
  28. </div>
  29. <div class="form-group">
  30. <label for="capitalize">Capitalize:</label>
  31. <input type="text" id="capitalize" class="capitalize form-control">
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </body>
  37. </html>

CSS Definitions

  • lowercase: makes all the letters in the input into lowercase
  • uppercase: makes all the letters in the input into uppercase
  • capitalizee: makes the first letter of every word in the input into capital letter

That ends this tutorial. Happy Coding :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.