How to Transform Input Text using CSS

Submitted by nurhodelta_17 on Saturday, February 24, 2018 - 21:01.

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

Add new comment

About text formats
  • 403 views