首页vue中的input框回显的数据为灰色，输入时为黑色: 代码不通过伪类实现

vue中的input框回显的数据为灰色，输入时为黑色: 代码不通过伪类实现

时间: 2024-03-20 11:41:19 浏览: 46

可以使用CSS的属性选择器来选择input框，并对其应用样式。具体可以通过以下代码实现： ```html <template> <div> <input type="text" v-model="inputValue" class="my-input"> </div> </template> <style> input.my-input { color: black; /* 输入时的颜色为黑色 */ } input.my-input[readonly] { color: gray; /* 回显数据的颜色为灰色 */ } </style> ``` 在上述代码中，使用了属性选择器`[readonly]`来选择只读的input框，并对其应用灰色的文本颜色。同时，通过设置class为“my-input”来对所有具有该class的input框应用黑色的文本颜色。

vue中的input框回显的数据为灰色，输入时为黑色: 代码

可以使用CSS样式来修改input框回显数据的颜色和输入时的颜色，具体可以通过以下代码实现： ```html <template> <div> <input type="text" v-model="inputValue" class="my-input"> </div> </template> <style> .my-input { color: black; /* 输入时的颜色为黑色 */ } .my-input::placeholder { color: gray; /* 回显数据的颜色为灰色 */ } </style> ``` 在上述代码中，使用了CSS的伪类选择器`::placeholder`来对input框的回显数据进行样式设置。同时，通过设置class为“my-input”来对所有具有该class的input框应用这些样式。

阅读全文