css控制输入框大小写

应用背景

实现输入框，输入小写字母自动转大写，很多同学都会立即想到用js实现

<input type="text"
        v-model="value"
        @change="value = value.toUpperCase()">

其实还有更简单的方法，css即可实现（仅仅是视觉上的）

.uppercase {
    text-transform:uppercase
}

在所有需要小写转大写的元素上加上这个类名即可

浏览器支持

能不能继承，能不能大写转小写呢？ 都可以！！！

可能的值

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

 

textarea元素也支持此属性