css中hover时改变input中placeholder的颜色
时间: 2023-08-10 09:09:47 浏览: 116
可以使用CSS伪类选择器 `::placeholder` 来改变输入框的占位符文本的样式。同时,使用 `:hover` 伪类选择器来指定当鼠标悬停在输入框上时的样式。
下面是一个例子,当鼠标悬停在输入框上时,输入框中的占位符文本颜色将变为红色:
```css
input:hover::placeholder {
color: red;
}
```
相关问题
input输入框中添加按钮
您可以使用HTML和CSS来创建一个带有按钮的输入框。以下是一个简单的示例代码:
```html
<div class="input-wrapper">
<input type="text" placeholder="输入内容">
<button type="button">添加</button>
</div>
```
```css
.input-wrapper {
display: flex;
align-items: center;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-right: none;
border-radius: 5px 0 0 5px;
}
button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: 1px solid #007bff;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
border-color: #005cbf;
}
```
您可以将这些代码复制并粘贴到HTML和CSS文件中,并根据需要进行修改。这将创建一个带有输入框和按钮的简单UI元素。
.A8 input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder { : #c2c2c2; -webkit-transition: color .5s; }
这是一个 CSS 样式表的代码,用于设置文本输入框的占位符文本(placeholder)的样式。其中,-webkit-input-placeholder 是一个伪类,表示选中输入框中的占位符文本,后面的 { } 中的代码则是对其进行样式设置。具体来说,这段代码会在输入框被聚焦(focus)或者鼠标悬停(hover)在其上时,将占位符文本的颜色设置为 #c2c2c2(即浅灰色),并且在颜色变化时添加 0.5 秒的渐变效果。