我希望input默认状态背景为透明，输入时、输入完毕后和离开焦点时为红色

你可以使用CSS来实现这个效果。具体的实现方式如下：

input {
  background-color: transparent; /* 默认状态背景为透明 */
  border: none; /* 去掉边框 */
  border-bottom: 1px solid red; /* 底部边框为红色 */
}

input:focus {
  border-bottom-color: green; /* 输入时底部边框为绿色 */
}

input:valid {
  border-bottom-color: blue; /* 输入完毕后底部边框为蓝色 */
}

解释一下：

- 默认状态下，`input`元素的背景色为透明，边框被去掉，底部边框为红色。
- 当`input`元素被聚焦时，即输入时，底部边框颜色改为绿色。
- 当`input`元素输入完毕后，如果输入内容符合要求（如输入了内容且符合格式），底部边框颜色改为蓝色。如果输入内容不符合要求，则边框颜色不会改变。
- 当`input`元素失去焦点时，底部边框颜色会恢复为红色。

你可以根据自己的需要调整各个状态下的边框颜色。

相关问题

我希望input默认状态背景为透明，输入时、输入完毕后和离开焦点时为背景变红色

你可以使用CSS来实现这个效果。你可以给输入框设置一个默认的透明背景，然后使用:focus和:valid伪类来设置输入时和输入完毕后的背景色为红色，而使用:invalid伪类来设置离开焦点时输入框内容不合法时的背景色为红色。以下是一个示例：

input[type="text"] {
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 10px;
}

input[type="text"]:focus {
  outline: none;
  background-color: #ffcccc;
}

input[type="text"]:valid {
  background-color: #ffe6e6;
}

input[type="text"]:invalid {
  background-color: #ffcccc;
}

这里我们使用了input元素的type属性为text来定义输入框，当然你也可以使用其他类型的输入框。使用:focus、:valid和:invalid伪类来定义输入框的不同状态下的样式。注意，使用:valid和:invalid伪类需要在HTML中设置输入框的pattern属性或使用JavaScript动态设置验证规则。

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

可以使用CSS样式来修改input框回显数据的颜色和输入时的颜色，具体可以通过以下代码实现：

<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框应用这些样式。