在input中右边加上一个图标的css样式

要在输入框右边加上一个图标，可以使用CSS中的伪元素(:after或:before)来实现。以下是一个示例代码：

<div class="input-container">
  <input type="text" placeholder="请输入内容">
</div>

.input-container {
  position: relative;
}

input {
  padding-right: 30px; /* 留出位置放置图标 */
}

.input-container::after {
  content: url("your_icon.png"); /* 图标的路径 */
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

这里使用了相对定位和绝对定位来让伪元素与输入框对齐，并使用了transform属性来使图标垂直居中。可以根据需要调整位置和大小。

相关问题

input 样式_【HTML+CSS】input输入框内添加两个图标

可以使用伪元素 `::before` 和 `::after` 来实现在 input 输入框内添加两个图标。

HTML 代码：

<div class="input-wrapper">
  <input type="text" placeholder="请输入内容">
</div>

CSS 代码：

.input-wrapper {
  position: relative;
}

.input-wrapper input[type="text"] {
  width: 300px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px 40px 10px 10px;
}

.input-wrapper input[type="text"]::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("路径/图标1.png") center no-repeat;
}

.input-wrapper input[type="text"]::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("路径/图标2.png") center no-repeat;
}

其中，`input-wrapper` 是包裹 input 输入框的容器，`::before` 伪元素用于添加第一个图标，`::after` 伪元素用于添加第二个图标，具体的样式可以根据自己的需求进行调整。

css如何给element ui中的Input错误的时候修改样式

要修改 Element UI 中 Input 组件在错误状态下的样式，可以通过以下两种方式实现：

1. 使用 Element UI 提供的样式类名

当 Input 组件出现错误时，它会自动添加 `is-error` 样式类名。因此，可以通过以下方式修改错误状态下的样式：

.el-input.is-error input {
  border-color: red;
}

上述 CSS 代码可以将错误状态下的 Input 边框颜色修改为红色。你可以根据需要修改其他样式。

2. 使用 scoped slot

Input 组件还提供了一个 scoped slot，可以在 Input 内部自定义样式。可以通过以下方式使用 scoped slot：

<template>
  <el-input v-model="inputValue" :validate-event="false">
    <template #prepend>
      <span class="prepend">https://</span>
    </template>
    <template #append>
      <span class="append">.com</span>
    </template>
    <template #error>
      <i class="el-icon-warning"></i>
    </template>
  </el-input>
</template>

在上述代码中，我们使用了三个 scoped slot：`prepend`、`append` 和 `error`。在 `error` slot 中，我们可以自定义错误状态下的样式。例如，可以添加一个警告图标：

.el-input__suffix .el-icon-warning {
  color: red;
}

上述 CSS 代码可以将警告图标的颜色修改为红色。你可以根据需要修改其他样式。