1

I wrote the code for an input form, in whose css I mentioned 

text-transform:uppercase;

But in the form I added the placeholder as "Name".However when I view it in the actual weppage the placeholder becomes "NAME". It looks quite awkward on the page in capitals.The input and css are:

#textbox {
            outline:none;
            background:#732ab7;
            caret-color:lightgreen;
            border-style:groove;
            border-width:0px 0px 10px 0px;
            border-top:none;
            border-left:none;
            border-right:none;
            border-bottom-color:lightgreen;
            padding:0px 0px 2px 15px;
            text-transform: lowercase;

       }

Input tag :-

<input hspace="32px" vspace="70px" id="textbox" type="text" placeholder="Name"></input>
Manas Singh
  • 65
  • 1
  • 12

1 Answers1

3

Every browser has a different method to control the placeholder styling.use the below CSS to avoid placeholder styling

input { 
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

Already someone answered check this

Akash D
  • 780
  • 2
  • 11
  • 27