Make Input Value Uppercase in CSS Without Affecting the Placeholder

Make input value uppercase in CSS without affecting the placeholder

Each browser engine has a different implementation to control placeholder styling. Use the following:

jsBin example.

input { 
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
::placeholder { /* Recent browsers */
    text-transform: none;
}

Needless to say, this only works in browsers that can handle placeholders. (IE9/10+)

Issue with input placeholder in text-transform

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

text-transform: capitalize; Also affects Placeholder

You could style the placeholder--

::-webkit-input-placeholder {
   text-transform: initial;
}

:-moz-placeholder { 
   text-transform: initial;
}

::-moz-placeholder {  
   text-transform: initial;
}

:-ms-input-placeholder { 
   text-transform: initial;
}

How do you automatically set text box to Uppercase?

You've put the style attribute on the <img> tag, instead of the <input>.

It is also not a good idea to have the spaces between the attribute name and the value...

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

Please note this transformation is purely visual, and does not change the text that is sent in POST.

NOTE: If you want to set the actual input value to uppercase and ensure that the text submitted by the form is in uppercase, you can use the following code:

<input oninput="this.value = this.value.toUpperCase()" />

Capitalize placeholders

Try this

::-webkit-input-placeholder {
  text-transform:capitalize;
}

In html text-transform property not working with initial in the text box

You can do this inside a function:
For example:

$(document).ready(function() {    
    $('input').on('keypress', function(event) {
        var $this = $(this),
        val = $this.val();
        val = val.charAt(0).toUpperCase() + val.substr(1);
        $this.val(val);
   });
});    

This will give you the desired output. Hope this helps :)

Switching between UPPER and Regular text using the input text placeholder

If you're willing to deal with it not working in EVERY browser, you can simply set a different text-transform for the placeholder:

input {

  text-transform: uppercase;

}

::-webkit-input-placeholder {

  text-transform: none;

}

:-moz-placeholder {

  text-transform: none;

}

::-moz-placeholder {

  text-transform: none;

}

:-ms-input-placeholder {

  text-transform: none;

}

<input type="text" placeholder="place holder" />

---

Related Topics