如何在文本框中输入大写字母而不影响占位符？

【问题标题】：How can I have entry in caps in a text box without affecting placeholder?如何在文本框中输入大写字母而不影响占位符？
【发布时间】：2018-06-22 14:04:45
【问题描述】：

我希望我的占位符使用标题字母（例如 -- 请输入您的护照号码），并且我的条目全部使用大写字母。它还包含一些数字。我试过这个：Make input value uppercase in CSS without affecting the placeholder 但是当我尝试这个解决方案时，我页面上的所有条目都是大写的。我只想要一个大写的特定条目。

【问题讨论】：

请展示您的尝试。

标签： css html

【解决方案1】：

也许使用class ...

input.separate { 
    text-transform: uppercase;
    width: 300px;
    height: 35px;
    padding: 0 5px;  
    margin: 5px 0;
}
input { 
	text-transform: none;
    width: 300px;
    height: 35px;
    padding: 0 5px;    
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: capitalize;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: capitalize;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: capitalize;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: capitalize;
}

<input class="separate" type="text" placeholder="please enter your passport number" />
<input type="text" placeholder="please enter your passport number" />

【讨论】：