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

Full HTML

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

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
5 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.