在input中右边加上一个图标的css样式
时间: 2024-02-12 09:05:59 浏览: 62
要在输入框右边加上一个图标,可以使用CSS中的伪元素(:after或:before)来实现。以下是一个示例代码:
```html
<div class="input-container">
<input type="text" placeholder="请输入内容">
</div>
```
```css
.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 代码:
```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 代码可以将警告图标的颜色修改为红色。你可以根据需要修改其他样式。
阅读全文