解决html中input的placeholder的颜色,点击时消失,input点击时样式的问题

本文介绍了如何通过CSS和简单的JavaScript代码实现自定义输入框的样式及行为,包括更改占位符字体颜色、控制点击输入框时边框样式的变化以及实现点击和离开时占位符文本的显示与隐藏。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<input placeholder="暑期大促" onfocus="this.placeholder=''" onblur="this.placeholder='暑期大促'" type="text">

对于浏览器不兼容的,使用以下代码,更改placeholder的字体颜色等

.search-input input::-webkit-input-placeholder{
    color: #000;
}
.search-input input:-moz-placeholder{
    color: #000;
}
.search-input input::-moz-placeholder{
    color: #000;
}
.search-input input:-ms-input-placeholder{
    color: #000;
}

使用outline来控制点击input时input边框样式的改变

input{
  outline:none;
}

控制placeholder点击时消失文本,离开后文本重新显示,使用一个小小的js就可以了

onfocus="this.placeholder=''" /*点击的时候文本设置为空*/
onblur="this.placeholder='暑期大促'" /*离开的时候文本显示出来*/

将这一部分代码添加到<input placeholder="暑期大促" οnfοcus="this.placeholder=''" οnblur="this.placeholder='暑期大促'" type="text" >就可以

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值