在input中右边加上一个图标的css样式
时间: 2024-02-12 20:04:35 浏览: 25
可以使用CSS中的伪元素 ::after 或者 ::before 来实现在input右侧添加图标的效果。例如:
```css
input::after {
content: url(icon.png);
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
```
这个样式会在input的右侧添加一个名为icon.png的图片。其中,position: absolute; right: 10px; 表示将图标放在input的右侧,距离input的右侧边缘为10px。top: 50%; transform: translateY(-50%); 表示将图标垂直居中对齐。需要注意的是,如果input设置了padding,需要将right的值减去相应的padding值才能达到预期的效果。
相关问题
input 样式_【HTML+CSS】input输入框内添加两个图标
可以使用伪元素 `::before` 和 `::after` 来实现在 input 输入框内添加两个图标。
HTML 代码:
```html
<div class="input-wrapper">
<input type="text" placeholder="请输入内容">
</div>
```
CSS 代码:
```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` 样式类名。因此,可以通过以下方式修改错误状态下的样式:
```css
.el-input.is-error input {
border-color: red;
}
```
上述 CSS 代码可以将错误状态下的 Input 边框颜色修改为红色。你可以根据需要修改其他样式。
2. 使用 scoped slot
Input 组件还提供了一个 scoped slot,可以在 Input 内部自定义样式。可以通过以下方式使用 scoped slot:
```html
<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 中,我们可以自定义错误状态下的样式。例如,可以添加一个警告图标:
```css
.el-input__suffix .el-icon-warning {
color: red;
}
```
上述 CSS 代码可以将警告图标的颜色修改为红色。你可以根据需要修改其他样式。